Sunny Books
What we have

CSS3 animations and @keyframes

Animation is a new CSS property that allows for animation of most HTML elements (such as div, h1 and span) without JavaScript or Flash. Because the technology is still relatively new, prefixes for the browser vendors are required. So far, the syntax is exactly the same for each browser, with only a prefix change required.

To use CSS animation, you first specify some keyframes for the animation - basically what styles will the element have at certain times. The browser does the tweening for you.

@keyframes

A key frame is a set of particular points in an animation sequence. Usually, a key grams has a start point and an end point as "from" and "to", also we can specify the points in percentage, which is, 0% means "from", 50% means half way, and 100% means end. Key frames are defined by using the @keyframes at-rule, and each at-rule is assigned a unique identifier.

For exmaple:

@keyframes myAnimation {
from: bottom:0px; background:#ccc;
to: bottom:50px; background:#f00;
}

Animations

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Syntax

div {animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction}

Animation Properties

The following table lists the @keyframes rule and all the animation properties:

Property Description
@keyframes Specifies the animation
animation A shorthand property for all the the animation properties, except the animation-play-state property
animation-name Specifies the name of the @keyframes animation
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0
animation-timing-function Describes how the animation will progress over one cycle of its duration. Default "ease"
animation-delay Specifies when the animation will start. Default 0
animation-iteration-count Specifies the number of times an animation is played. Default 1
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"
animation-play-state Specifies whether the animation is running or paused. Default "running"

Browser support

4.0

4.0

5.0

10.0

12.0

Example

This example shows an animation of size and color. Mouse over to see the effect.
@keyframes resize {
0% {width:100px; height:50px;}
50% {width:150px;height:75px;background-color:rgba(255,0,0,0.2);}
100% {width:200px; height:100px;background-color:rgba(255,0,0,0.9);}
}
div[box1] {width:100px; height:50px; background-color:#1ea3e6; }
div[box1]:hover {
animation-name: resize;
animation-duration: 1s;
animation-iteration-count: 4;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}

SUNWEB EXPERT