1. Eclectic Animations

2. Wireframe Plan for Page

3. Basics of Animation Keep in mind that transitions and transformations often used with animation
A CSS animation is an instruction to progressively update one or more CSS properties over a period of time.
Building Blocks 
Keyframes— for stages and styles 
Name 
Stages, as a percentage  
CSS Properties, defined for each stage. e.g. opacity, or transform.  
Properties — to elements  
Assign
Define how  animated  

4. Animations involve two basic parts:
The animation code
Applying the animation to an element
More Information at:
Click for a quick perusal.

5. Animations involve two basic parts:
For an animation to work, you must specify at least the following two properties: name and duration.
Additional Animation Properties
In addition to the required animation-name and animation-duration properties, you can further customize and create complex animations using the following properties:
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

6. #1 Animation: Purpose is to constantly change background color
Double click on animateONE.txt.
Copy to your stylesheet.
I’ll give more instructions on applying it.

7. #2 Animation: Purpose is to move object in rectangular motion
Double click on animateTWO.txt.
Copy to your style sheet.
There is an #anim div in the HTML <header>
I’ll give more instructions on applying the animation.

8. #3 Animation/Transformation: When user hover over div, it spins
Double click on animateTHREE.txt.
Copy to your style sheet.
Add this div to your HTML:
I’ll give more instructions on applying it to the HTML parts.
<div class="morph practicePic">
<!– insert small picture here-->
</div>