Exercise by:
Naa Lamiokor Dove
20 Years Old
Ridge Church School
Read / Add Comments
Naa Lamiorkor: Animation Effects

CODERS MEETING
Saturday 19th October, 2013
SESSION 43
COURSE: CODING
COURSE LESSON: CSS
ACTIVITY: Animation Effects 5

Exercise Bar - Session 43
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 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 for each wheel should be as follows:
a. mywheel1
b. mywheel2
c. mywheel3
d. mywheel4
e. mywheel5
 Each wheel should have a differnt 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 0 degrees and translateX of 0px
b. 100%: rotate to 720 degrees and translateX of 850px;