CSS3 Animations
Animate CSS property values by changing them over a timeline.
CSS3 animations allow you to animate the values of a property by specifying its "from" and "to" value (kind of like a "before" and "after" value).
In this respect, CSS3 animations are similar to CSS3 transitions. CSS transitions provide a quick way of animating property values. However, CSS animations allow you to do much more than transitions.
With CSS animations, you can specify how long it takes to change from one value to the other, how many times it will iterate (repeat), whether or not to alternate between start and end values, as well as any delay to occur before the animation starts running. You can also use CSS animations to specify different values at different points in the timeline.
Therefore you can use CSS animations to do things like move elements around the screen, make them spin around, change color, size, shape, and much more.
The CSS3 Animation Properties
The following properties were created specifically for the purpose of CSS animations.
animation- Shorthand property for setting multiple animation properties in one place.
animation-delay- Allows you to specify how long the animation should wait until it starts playing.
animation-direction- Allows you to specify which direction an animation will be played in.
animation-duration- Allows you to specify how long your animation will take to complete one cycle. This allows you to adjust the speed of the animation, so that it runs quickly, slowly, or somewhere in between.
animation-fill-mode- Allows you to define what values are applied by the animation outside the time it is executing. This can be before the animation has been applied, or after it has finished running.
animation-iteration-count- Allows you to specify how many iterations - or cycles - the animation will play. In other words, it determines how many times it loops before stopping.
animation-name- Defines a list of animations that apply. Each name is used to select the
@keyframesat-rule that provides the property values for the animation. animation-play-state- Allows you to specify whether an animation is running or paused.
animation-timing-function- Describes how the animation will change speed over the duration of each cycle. This effect is commonly called "easing functions".
The @keyframes at-rule
Animations are defined by the @keyframes at-rule. This at-rule contains the name of the animation, followed by a set of styles (delimited by curly braces).
The keyframe selector for a keyframe style rule consists of a comma-separated list of percentage values or the keywords from or to. This is where you specify the styles for each part of the animation.
Animatable Properties
Not all CSS properties are animatable. Some properties simply don't lend themselves to being animated. However, the list of animatable properties is not small either.
Here's the list of CSS animatable properties.