CSS3: Keyframe Animation

CSS3 Transitions are good but naturally limited; they are only applied when a property value changes.

The CSS3 Animations Module goes beyond what is possible with Transitions, allowing animations to be applied directly to elements with a syntax that is more flexible and permits more granular control. Animations and transitions have quite a lot of syntax in common, but the process for creating animations is very different: First, you define the properties and timings, and then you add the animation controls to the elements that will be animated.

The Animations Module is implemented in all current browsers, so check the Can I Use CSS3 website to check specific versions.

Key Frames

The first step in creating animations is to define your key frames. A key frame is a point that defines the start and end of a transition. The most simple animation will have two key frames—one at the start and one at the end—whereas more complex ones will have multiple key frames in between. A CSS transition is essentially an animation with only two key frames.

In CSS3, key frames are declared in the @keyframes rule, which has the following syntax:

The first value for the @keyframes rule is name; this unique identifier will be used to call the animation, which I’ll discuss later. You can use pretty much any value here, although I suggest using a word or term that is relevant to the animation it describes—your stylesheets will be much easier to follow if you do.

The next value, keyframe, sets the position along the duration of the animation that the key frame will occur. The possible values are percentages or one of the keywords from or to (which are analogous to 0 percent and 100 percent, respectively). You must specify at least two key frames (from/0% and to/100%), but you can have as many as you like as long as each has a unique position in the animation.

Within each key frame is a CSS declaration or series of declarations that are applied to a selected element at the specified stage of the animation. Let me clarify with an example. The following code describes a simple animation with three key frames:

At the beginning of the animation, the selected element has a border that is 10px wide; halfway through the animation, the border is reduced to a width of 1px; and at the end of the animation, the border is 1px wide, and the height and width are 120px and 150px, respectively. Between each of the key frames, the elements are animated gradually, so between the start and 50 percent mark, the border is animated to smoothly change width from 10px to 1px.

Note that inheritance operates on individual key frames, so if you want a change to persist between frames, you need to specify it in each frame. If I hadn’t specified border-width again in the to key frame, it would default back to the inherited value of the element the animation was applied to, meaning the animation could be quite different.

Animation Properties

Once you’ve defined the key frames, the next step is to add the controls to the elements you want to animate.

Name

The animation-name property is used to refer to an animation that’s been defined with the @keyframes rule, and as such the syntax is quite straightforward:

You can see it requires only a single value, which is the name of an already defined animation. To call the animation created in the previous section, you would use:

The only other permissible value is none, which prevents any animations from occurring on this element.

Duration

The duration of an animation is set by the animation-duration property:

The time value is a number with a unit of either ms or s, or a 0 (zero), which prevents the animation from running. (Negative values are also implemented as 0.) To extend the example animation so it’s six seconds in duration, you add this line:

Timing Function

Another property  is animation-timing-function:

Permitted values are ease, linear, ease-in, ease-out, and ease-in-out. The cubic-bezier function is also allowed.

Therefore, if you want to make your animation “ease in” at the start, you add this code:

Delay

Yet another property that has (kind of) already been introduced is animationdelay:

The time value is a number with a unit of either ms or s, which sets the delay before an animation begins. A 0 (zero) means no delay. Negative values cause the animation to “skip” by that amount.

To delay the example animation by two seconds, you include this code:

Iteration Count

An animation can be repeated any number of times. The number of repetitions is set by the animation-iteration-count property, which has this syntax:

The count value in this syntax is either a whole number or the keyword infinite. A number value sets how many times the animation repeats. The default value is 1 (one), meaning the animation plays from start to end once and then stops. The infinite value means the animation loops indefinitely, or at least until another condition is met that changes this value. A value of 0 (zero) or any negative number prevents the animation from playing.

If you want the animation to repeat 10 times, you need to add the following declaration:

Direction

Animations play from start to finish, but they can also play in reverse. You can set whether your animation always plays in one direction or alternates playing forward and backward. To do this, you use the animation-direction property:

The keyword value has two options: normal or alternate. The default is normal, which always plays the animation forward: The animation plays through from start to finish, and then, if it is set to repeat, it plays again from the start. If the alternate value is used, the animation plays from start to finish and then plays in reverse before starting over again.

If you consider each iteration of the animation as a “cycle,” the odd-numbered cycles play forward and the even-numbered play backward. Let’s set the animation to alternate forward and backward:

Our animation all together is this:

Here is a demo example of using CSS3 Keyframes for animation.

Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Leave a Reply

Your email address will not be published. Required fields are marked *