Animation Property

Objectives
In this lesson, students will learn:

  • How to animate from one set of properties to another set of properties with the @keyframe style rule animation property

 Syntax – Basic Structure

Note: You can replace the keyword with 0% and the to keyword with 100%.

Each @keyframes is composed of:

  • Name of the animation: A name that describes the animation, for example,.bounceIn
  • Stages of the animation: Each stage of the animation is represented as a percentage.  0% represents the beginning state of the animation.  100% represents the ending state of the animation. Multiple intermediate states can be added in between.
  • CSS Properties: The CSS properties defined for each stage of the animation timeline.


Resources
Transitions & Animations
The Guide To CSS Animation: Principles and Examples
Understanding CSS3 Transitions
CSS Cubic-Bezier Builder
Using CSS Animations
CSS Tricks Animation
CSS Animation for Beginners

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s