Animating with CSS and the Canvas

An attractive webpage is easily enhanced by interesting animation and movement on the page that really focuses the visitor's attention on the content you want to emphasize. CSS animation consists of 2 things: (1) the styles that are animated, and (2) the keyframes that indicate the beginning and end states for each animation style. Once you have an animation set up, you can use the CSS animation properties to get even more control over how it looks.

After completing this resource, Learners will be able to:

• Explain how to add keyframes to the animations
• Explain what keyframes are and how to use them
• Demonstrate how to draw shapes and text on the canvas as well as add images