CODERS CLUB 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 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.