$1$

Open the index.html file in the chapter$10\backslash$apply folder from the Data Files in your text editor. Update the comment with your name, the file name, and today$$s date. Add your name to the paragraph element located within the footer element near the bottom of the page.

$2$

Open the index.html file in your browser to view the page.

$3$

Update the CSS link within the head element to use the apply$10.$css file located within the apply$\backslash$css folder.

$4$

Open the apply$10.$css file from the apply$\backslash$css folder. Modify the comment at the top of the style sheet to include your name, today$$s date, and the file name.

$5$

Add the following comment and @keyframes rules above the footer style rule:

Unnumbered lines of H T M L code read as follows. forward slash asterisk Animation asterisk forward slash at the rate$-$web kit$-$key frames color left brace from left brace background$-$color colon hash f b d a e $9$ semicolon right brace to left brace background$-$color colon hash $660$ b $32$ semicolon right brace right brace at the rate key frames color left brace from left brace background$-$color colon hash f b d a e$9$ semicolon right brace to left brace background$-$color colon hash $660$ b $32$ semicolon right brace right brace

$6$

Insert the following declarations to the style rule for the square class selector. For each declaration, you must first include a declaration with the $-$webkit$-$ prefix, followed by the standard declaration.

Animation name property that specifies the name of the @keyframes rule animation.

Animation duration property with a value of $5$ seconds.

$7$

Create a new style rule for the square class selector with the hover pseudo$-$class that specifies a transform property with translate$(80$px$)$ as the value.

$8$

Create a script.js file and save it within the apply$\backslash$scripts folder. Include a multi$-$line comment at the top of the page with your name, today$$s date, and the file name.

$9$

Add a single line comment with the text Function to display content.

$10$

Create the following function below the comment:

Unnumbered lines of H T M L code read as follows. function content left parenthesis right parenthesis left brace var text equals document dot get Element By I d left parenthesis left double quotation mark new right double quotation mark right parenthesis semicolon text dot text Content equals left double quotation mark Hi$.$ I am a new paragraph that was created with a JavaScript function. right double quotation mark semicolon text dot style dot color equals left double quotation mark hash c $0145$ f right double quotation mark semicolon text dot style dot font Size equals left double quotation mark $2$ e m right double quotation mark semicolon right braceEnlarge Image

$11$

In the index.html file, above the closing body tag, add a script element and specify script.js as the src$.$

$12$

Add an onclick event handler that calls the content$()$ function to the button element in the main section.

$13$

Save all of your changes and open index.html in your browser. View the animation and click the button to ensure that the content$()$ function is called and the new text is displayed.

$14$

Validate your HTML document and fix any errors that are identified.

$15$

Submit the files in a format specified by your instructor.

$16$

In this exercise, you created animation using CSS$.$ Identify another way to use the @keyframes rule to create animation with the square div element on the page.