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 and a border of 1px. |
Using CSS apply animation-duration of 2 seconds,animation delay of 1s, animation-direction of alternate and animation-iteration-count of infinite to all the wheels.The animation-name fo each wheel should be as follows:
a. mywheel1
b. mywheel2
c. mywheel3
d. mywheel4
e. mywheel5 |
Each wheel should have a different timing function as follows:
a.wheel1: linear
b.wheel2: ease
c.wheel3: ease-in
d.wheel4:ease-out
e.wheel5:ease-in-out |
Under the @keyframes rule for each wheel apply the following styles.
a.0%:rotate to 0degrees and translateX of 0px.
b.100%: rotate to 720 degrees and translateX of 850px.
|