Animations

CSS3 provides another, more feature-rich mechanism for creating animations. With CSS transitions, you can only animate from one set of CSS properties to another. CSS3 animations let you animate from one set of properties to another set to another set and so on. It allows you to control each step of an animation via keyframes. In addition, you can have an animation repeat, pause when a visitor mouses over it, and even reverse itself once the animation reaches its end.

1. Define the animation. This involves setting up keyframes that list the CSS properties to animate. 2. Apply the animation to an element. Once defined, you can apply the animation to any number of elements on a page. You can even set up separate timings, delays, and other animation properties for each element. So you can use the same animation with slightly different settings multiple times on a page.

To animate an element in CSS, you first create a named animation, then attach it to an element in that element’s property declaration block.

To create an animation, use the @keyframes rule followed by a name of your choosing, which will serve as the identifier for the animation.

The syntax involved may look kind of strange, but here’s the basic structure:

@keyframes animationName { 
     from { 
        /* list CSS properties here */ 
    } 
     to { 
        /* list CSS properties here */ 
    } 
}

Keyframes can be specified in any order; it’s the percentage values, rather than the order of the declarations, that determine the sequence of keyframes in the animation.

Here are a few simple animations:

@-webkit-keyframes 'appear' { 
     0% { 
         opacity: 0; 
    } 
     100% { 
         opacity: 1; 
    } 
} 
 @-webkit-keyframes 'disappear' { 
     to { 
         opacity: 0; 
    } 
     from { 
         opacity: 1; 
    } 
} 
 @-webkit-keyframes 'appearDisappear' { 
     0%, 100% { 
         opacity: 0; 
    } 
     20%, 80% { 
         opacity: 1; 
    } 
}

The last animation is worth paying extra attention to: we’ve applied the same styles to 0% and 100%, and to 20% and 80%. It means the element will start out invisible (opacity: 0;), fade in to visible by 20% of the way through the duration, remain visible until 80%, then fade out.

This property is used to attach an animation (defined using the @keyframes syntax previously) to an element.

-webkit-animation-name: 'appear';

Note that the quotes around the animation name in both the property value and the @keyframe selector are optional.We recommend including them to keep your styles as legible as possible, and to avoid conflicts.

The animation-duration property defines the length of time, in seconds or milliseconds, an animation takes to complete one iteration (all the way through, from 0% to 100%):

-webkit-animation-duration: 300ms;

Like the transition-timing-function property, the animation-timing-function determines how the animation will progress over its duration. The options are the same as for transition-timing-function (ease, linear, ease-in, ease-out, easein-out, or cubic-bezier)

-webkit-animation-timing-function: linear;

This property lets you define how many times the animation will play through. The value is generally an integer, but you can also use numbers with decimal points (in which case, the animation will end partway through a run), or the value infinite for endlessly repeating animations. If omitted, it will default to 1, in which case the animation will occur only once

-webkit-animation-iteration-count: infinite;

When the animation iterates, you can use the animation-direction property with the value alternate to make every other iteration play the animation backwards. For example, in a bouncing ball animation, you could provide keyframes for the falling ball, and then use animation-direction: alternate; to reverse it on every second play through.

-webkit-animation-direction: alternate;

The default is normal, so the animation will play forwards on each iteration. When animations are played in reverse, timing functions are also reversed; for example,ease-in becomes ease-out.

Used to define how many milliseconds or seconds to wait before the browser begins the animation.

-webkit-animation-delay: 15s;

The animation-fill-mode property defines what happens before the animation begins and after the animation concludes. By default, an animation won’t affect property values outside of its runs, but we can override this default behavior with animation-fill-mode . We can say the animation to "sit and wait" on the first keyframe until the animation starts, or stop on the last keyframe without reverting to the original values at the conclusion of the animation, or both.

The available values are none, forwards, backwards, or both. The default is none, in which case the animation proceeds and ends as expected, reverting to the initial keyframes when the animation completes its final iteration. When set to forwards, the animation continues to apply the values of the last keyframes after the animation ends. When set to backwards, the animation’s initial keyframes are applied as soon as the animation style is applied to an element. Both applies both the backwards and forwards effects.

-webkit-animation-fill-mode: forwards;

The animation-play-state property defines whether the animation is running or paused. A paused animation displays the current state of the animation statically. When a paused animation is resumed, it restarts from the current position. This provides a simple way to control CSS animations from your JavaScript.

The animation property takes as its value a space-separated list of values for the longhand animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode properties.

.verbose { 
	-webkit-animation-name: 'appear'; 
	-webkit-animation-duration: 300ms; 
	-webkit-animation-timing-function: ease-in; 
	-webkit-animation-iteration-count: 1; 
	-webkit-animation-direction: alternate; 
	-webkit-animation-delay: 5s; 
	-webkit-animation-fill-mode: backwards; 
} 
 
/* shorthand */ 
.concise { 
	-webkit-animation: 'appear' 300ms ease-in 1 alternate 5s backwards; 
}

To declare multiple animations on an element, include a grouping for each animation name, with each shorthand grouping separated by a comma.

For example:

.target { 
	-webkit-animation: 
	'animationOne' 300ms ease-in 0s backwards, 
	'animationTwo' 600ms ease-out 1s forwards; 
}