1 | 2 | 3 | 4 | 5 |
Use HTML and CSS to insert five images of wheels with margins of 20px each. All the wheels should have width of 80px and height of 80px. | Place all the wheels in a parent box of width 950px and height 650px. Using CSS, give the parent box a shadow a shadow and a border of 1px. | Using CSS apply animation-duration of 2 seconds,
animation-delay of 1 seconds, animation-direction of alternate and animation-iteration-count of infinite to all the wheels.The animation-name for each wheel should be as follows: a. mywheel 1 b. mywheel 2 c. mywheel 3 d. mywheel 4 e. mywheel 5 |
Each wheel should have a different timing function as follows: a. wheel 1: linear b. wheel 2: ease c. wheel 3: ease-in d. wheel 4: ease-out e. wheel 5: ease-in-out |
Under the @keyframes rule for each wheel apply the following styles. 0%:rotate to 0 degrees and translateX of 0px. b.100%:rotate to 720 degrees and translateX of 850px. |