CSCE 102 Lab 14 — Fun with Animation

General information

  • Read the entire assignment before you start.
  • Always maintain backup copies of your work, and work on the X drive during lab.
  • Never share your password or memory stick with anyone. Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work.

Lab objectives

  • Fun with Animation

Part I — Animation

1.  Click on the following link: https://www.w3schools.com/css/css3_animations.asp

2.  Read through the examples. Click on Try it Yourself for each of the examples and try it out.

3.  You can edit/run this code in the tutorial and copy/paste into your editor or just create in the editor.

4.  Create lab14xx.html in the editor and save it in your All_Submissions folder.

5.  Create two divs: the first div will be empty and second div will contain words.

6.  Put a border for the first div. Choose your preferable border width, style and color.

7.  Choose a background color of your choice to fill the first div.

8.  Make the first div move in a rectangular pattern. The div will grow in size towards right bottom corner and then will shrink back to initial size when it moves toward initial position.

9.  Remember to use animation-duration. Without this attribute, the animation will not work.

10.  Make the background color of first div change to another color when it moves to another corner. Therefore, this div will change color four times.

11.  Once the first div returns to the initial position, use the animation-direction attribute to reverse the direction of movement of this div.

12.  The first div will execute the animation for 5 times. Use animation-iteration-count to set number of times of animation.

13.  For the second div, write one sentence about yourself.

14.  The animation on second div will start 5 seconds later. Use Animation-delay to delay animation.

15.  Make the second div move diagonally from its position in the direction of right-bottom corner.

16.  While moving diagonally, rotate the div 360 deg. You may choose to rotate by 90 deg after every 25% of key frame. This animation should run forever using animation-iteration-count attribute.

17.  Save the assignment in your All_102Submissions folder. You can run it in the tutorial and copy/paste into your editor.

Update All_Index_xx.html

·  Add a link to lab14xx.html.