Workshop on CSS animations

you need to know to quick start and full use of excellent technology CSS3 animation key frames from the basics to tips for creating animations that will save you a lot of time and nerves.

"Animation" in the CSS has always boiled down to a hover-effects. With the pseudo: hover and: focus, we can change the color, size and position, background color and other properties of CSS, based on user actions. Using a: hover, you get only two positions: with the cursor and nenavedennym, in other words, only two keyframes: the start and end, there are no intermediate states Mezhuyev these provisions, and as a result, a sharp and sudden transition between them. In fact, it has no animation.

Transitions of CSS3 transitions have solved the problem of intermediate states, allowing the move from state to nenavedennogo the induced within a certain period of time. Transitions from the vendor prefixes are supported by excellent modern browsers (since IE10 and Firefox 4.0). With transitions, you can create simple animations, limited to two keyframes - start and end points - and a single repetition. Most developers overcome these limitations by using animation JavaScript. Since then, the situation with support for CSS3 animations, browser improved, it's time to rely less on JavaScript and create the animation is directly in the CSS.

In this article you will learn everything you need to create an animation by means of CSS. I draw your attention that you will need to use prefixes-webkit-and-moz-, to support your animation, Chrome, Safari 4 +, Firefox 5 +, Android Chrome, and iOS.

Keyframes

To animate the elements, you first need to describe the animation keyframes. Then you apply the animation to the elements. So, first of all describe the animation, which can be connected to an unlimited number of items. Animations are similar to transitions, except for the fact that they allow you to control the process step by step. To determine the animation you, as a minimum, you must specify the name of the animation and extreme keyframes - start and end points.

@ Keyframes flapping {
from {
Background-size: 100px 100px;
}
to {
Background-size: 20px 100px;
}
}

So, we have determined the name of the animation, the starting and ending keyframes. If you use one of the browsers listed above, click on the butterfly to see this animation in action.

In this animation, we used the terms from and to. We may also use interest rate that is usually required.

@ Keyframes flapping {
0% {
Background-size: 100px 100px;
}
100% {
Background-size: 20px 100px;
}
}

Announcing the animation, you need to remember the following:

Do not forget to put the% sign
when it comes to long, it does not matter specified in pixels or em, 0 is 0. But not when determining the animation. Do not forget to add the% sign when specifying units of measurement.
Do not forget to mention 100% or to declare the final keyframe animation.
Although the specification and does not require specifying 0% and 100%, but it is necessary for today's browsers.
Do not take the name of the animation in quotation marks
Although it would seem, the code becomes legible when you take the name in quotes, but it is not true with respect to the W3C, and will not work, the animation in Firefox.

One of the properties that make animation wins before the transition - is the ability to thoroughly control the animation. For example, the "rainbow" animation consists of 11 units of key personnel.

@ Keyframes rainbow {
0% {background-color: # FF0000;}
10% {background-color: # FF8000;}
20% {background-color: # FFFF00;}
30% {background-color: # 80FF00;}
40% {background-color: # 00FF00;}
50% {background-color: # 00FF80;}
60% {background-color: # 00FFFF;}
70% {background-color: # 0080FF;}
80% {background-color: # 0000FF;}
90% {background-color: # 8000FF;}
100% {Background-Color: # FF0080;}
}

If we used this transition, moving from the initial to the final # FF0000 # FF0080, we would simply have a transition from red to pink, passing only through the shades of red. Thanks to the same phase-control animation, we have the same transition, but through all the colors of the spectrum.

You can add any desired number of animatable properties in any block of keyframes. Watch the following example .

@ Keyframes rainbowdimmer {
0% {background-color: # FF0000; opacity: 1;}
20% {background-color: # FFFF00;}
40% {background-color: # 00FF00;}
50% {opacity: 0;}
60 % {background-color: # 00FFFF;}
80% {background-color: # 0000FF;}
100% {background-color: # FF0080; opacity: 1;}
}

This level of transparency varies from opaque to transparent, and then again to the opaque, while the color changes from one to another across the entire spectrum. Please note that not all properties need obyavlyat in each block of keyframes. Instead, we only add a property when it is needed.

Note also that the duplication of key personnel selectors are not supported:

<s> 100% {background-color: # FF0080;} </ s>
100% {opacity: 1;}

If two blocks of the same selectors, the subsequent block supersedes the previous ones.

On the other cancellation if your animation contains duplicate key frames, you will not have to declare the same block twice. Instead, the selectors are the same list of key frames, separated by commas. The announcement does not matter (100% can stand in front of 0%).
In the following example, a butterfly initial and final position of the same. Instead of declaring two separate blocks, we rrazmeschaem first and last selections, separated by commas:

@ Keyframes movement {
0%, 100% {
top: 0;
left: 0;
}
25% {
top: 0;
left: 100px;
}
50% {
top: 100px;
left: 100px;
}
75% {
top: 100px;
left: 0;
}
}

In the next animation with the ball bouncing a ball, jumping up again at the bottom of the container okazyvaestsya:

We announce with three of the four key frames in which the ball is at the bottom, because the last frame contains more than one property. You can apply the separation of duplicate frames separated only if all their properties, the values ​​are identical.

@-Webkit-keyframes bouncing {
40%, 70%, 90% {
animation-timing-function: ease-out;
bottom: 0;
}
0% {
bottom: 200px;
left: 0;
animation-timing-function: ease- in;
}
55% {
bottom: 50px;
animation-timing-function: ease-in;
}
80% {
bottom: 25px;
animation-timing-function: ease-in;
}
95% {
bottom: 10px;
animation-timing- function: ease-in;
}
100% {
left: 110px;
bottom: 0;
animation-timing-function: ease-out;
}
}

Please note that we have animated the two properties. We moved the ball up and down several times, using a phase-control. However, the movement from left to right was smooth, and, therefore, declaration terbovalo only two keyframes. We also changed the animation-timing-function, jumping to look smooth and natural. We will return to a discussion of animation-timing-function, but now most importantly, remember that animation-timing-function - this is the only property of the animation, which can be included in the description of the key frame. W3C offers an incomplete list of properties , can be animation kotoroye. We can apply the animation-timing-function, to indicate how the animation should move to the next keyframe. Without it, our ball was too bouncy.

/ * For browsers, Webkit * /
@-webkit-keyframes Flitter {
0% {
-webkit-transform: scale (1.1);
}
100% {
-webkit-transform: scale (0.2,1);
}
}
/ * for firefox * /
@-moz-keyframes Flitter {
0% {
-moz-transform: scale (1.1);
}
100% {
-moz-transform: scale (0.2,1);
}
}
/ * reserve for the future: for browsers poddezhivayuschih bezvendorny syntax * /
@ keyframes Flitter {
0% {
transform: scale (1.1);
}
100% {
transform: scale (0.2,1);
}
}

Vendor prefixes

All of these animations, but not all will work. At the time of this writing, the only browsers that support this animation, require the vendor prefix. We will have to declare a @ keyframes three times, with the prefix-moz-in for Firefox 5 +, with-webkit-prefix for Safari, Chrome and various mobile browsers, and, finally, without any prefix for browsers poddezhivayuschih vendor-neutral syntax.

Animating the elements

So, our animation obyavleny, and we can move on to animating elements of our pages, adding to his animation. We at least need to specify the name of the animation and its prodozhitelnost. There are many additional features that govern the animation, but the name and prodozhitelnost are required.

Let's start with our butterfly.

. Butterfly {
height: 100px;
width: 100px;
position: absolute;
top: 50px; left: 50px;
Background-Image: url (butterfly.png);
}

Name and prodozhitelnost animation

Our first goal is to make a butterfly flap its wings. To apply an animation, we specify the element name to use animation and its duration. To do this, we have two properties: animation-name, and animation-duration. In the animation-name property you can specify a list of names of animation, separated by commas, without kavychek.Eto your names defined in Rule @ keyframes. Thus, on the basis of our examples, we can use clapping and flapping wings, iridescent play and play with the change of transparency, as well as jumping.

In addition to specifying the name of the animation, we need to specify how long the animation lasts in seconds (s) or milliseconds (ms). Pointing to the property of the animation-duration prodozhitelnost animation, we will make the animation povotryatsya from 0% to 100%. Minimum prodozhitelnost - 1 millisecond counts. In our first example, with clapping wings, we took the value of 500ms, or 0,5 s

. Butterfly {
-webkit-animation-name: Flitter;
-webkit-animation-duration: 500ms;
-moz-animation-name: Flitter;
-moz-animation-duration: 500ms;
animation-name: Flitter;
animation-duration: 500ms ;
}

Retry count animation-iteration-count

We are not a butterfly flaps its wings (and not even clap)? By default, the animation is repeated once.For the same to run it several times , we add a property animation-iteration-count. Its acceptable value can be either an integer or 'infinite' - indefinitely. The default value is 1.

. Butterfly {
-webkit-animation-name: Flitter;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: Infinite;
-moz-animation-name: Flitter;
-moz-animation-duration: 500ms;
-moz-animation-iteration-count: Infinite;
animation-name: Flitter;
animation-duration: 500ms;
animation-iteration-count: Infinite;
}

The direction of animation animation-direction

Previous animation is not so much annoyed by the fact that does not stop, but the fact that moving from a 0% to 100% frame for 500 ms, and then jumps back to 0%. It turns out that for some time, it changes the width of 100px to 20px, and then sharply increasing to 100% during the transition to the next repetition.

Sometimes you need to animate transitions behave like transition, when the cursor hovers over the animation is played back .
With the help of animation-direction properties of each subsequent animation can be played to get from 100% to 0%, ie in the opposite direction. Bouncing the ball is moving in one and the de direction, from 0% to 100%, but a butterfly flapping wing is just right as an example to demonstrate the change in the direction of the animation. Let's add this feature to our butterfly:

. Butterfly {
-webkit-animation-name: Flitter;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: 40;
-webkit-animation-direction: Alternate;
-moz-animation-name: Flitter;
-moz-animation-duration: 500ms;
-moz-animation-iteration-count: 40;
-moz-animation-direction: Alternate;
animation-name: Flitter;
animation-duration: 500ms;
animation-iteration-count: 40;
animation -direction: Alternate;
}

Acceleration and deceleration 'animation-timing-function'

We can even fine tune our animation, pointing to the animation-timing-function, the values ​​must be computed over time. The default value - 'ease' (slow), but most of the movements in the wild is slow, then accelerating. Let's add value ease-in-out our animation-timing-function.

. Butterfly {
-webkit-animation-name: Flitter;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: 40;
-webkit-animation-direction: Alternate;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Flitter;
-moz-animation-duration: 500ms;
-moz-animation-iteration-count: 40;
-moz-animation-direction: Alternate;
-moz-animation-timing -function: ease-in-out;
animation-name: Flitter;
animation-duration: 500ms;
animation-iteration-count: 40;
animation-direction: Alternate;
animation-timing-function: ease-in-out
}

We have already added ease-in and ease-out at different stages, animating the bouncing ball. We repeat that the animation-timing-function - this is the only property of the animation, which can be included in the description of the key frame. Use animation-timing-function, to indicate how the animation should move to the next keyframe. Without it, our ball would too bouncy.

Delay 'animation-delay'

By default, read too many at once anmatsiya pomle application. This can be changed using the properties of the animation-delay. Although at first glance, it is very simple, there is a trick that is worth to know. If you need to start the animation c middle, specify a negative value animation-delay. For example, if a 10-second animation to indicate the value of the delay-5s, your animation will begin immediately, but in the middle.

'Animation' (shorthand)

Properties and detailed animations wordy. Even too. Especially with a vendor prefix. Fortunately, there is a brief account. It should include the name and duration of the animation. If you specify a delay, enter it first. Here's the general order of entry:

animation: <name> <duration> <timing -function> <delay> <iteration -count>
    <direction> <fill -mode>;

Thus, we can write the previous animation is much simpler:

. Butterfly {
-webkit-animation: Flitter 500ms ease-in-out 5S 40 Alternate;
-moz-animation: Flitter 500ms ease-in-out 5S 40 Alternate;
animation: Flitter 500ms ease-in-out 5S 40 Alternate;
}

The same elemeni can have multiple animations odnovremenno.nasha butterfly flaps its wings, but it will not fly. Let's send her to move in the container , as if she was indeed flying.

. Butterfly {
-webkit-animation: Flitter 300ms ease-in-1s out 40 Alternate, 5S Movement 2s linear;
-moz-animation: Flitter 300ms ease-in-1s out 40 Alternate, 5S Movement 2s linear;
animation: 300ms ease Flitter -in-out 1s 40 Alternate, linear 5S Movement 2s;
}

Always consider the length and number of interactions, animations, to correctly set the animation. Also, be careful what properties will be animated. Although we can apply an unlimited number of animations to the element, but each property may be applied at the same time only once. In other words, we can assign an element four animations, but also can use only one transformation and one position to the top / left.

. Butterfly {
-webkit-transform-origin:-20px-20px;
-moz-transform-origin:-20px-20px;
-webkit-animation:
Flitter 300ms ease-in-1s out 40 Alternate,
bouncing 10s ease-in-out 1s,
0.5s ease Rotation 24 1s;
-moz-animation:
Flitter 300ms ease-in-1s out 40 Alternate,
bouncing 10s in ease-out-1s,
0.5s ease Rotation 24 1s;
animation:
Flitter 300ms ease-in-out 40 Alternate 1s,
10s bouncing in ease-out-1s,
0.5s ease Rotation 24 1s;
}

We've added a transform-origin, so that the rotation looks more casual and natural . Also note that we have three animations that end at 13, 11 and 13 seconds respectively. By adding more animations, to relate the timing of their actions with each other.

Animation-fill-mode

Our lovely butterfly flits across the page, but the convulsive twitches in the upper left corner, when completed, "bouncing" animation. Due to the property animation-fill-mode, we may ask for a butterflyStavan in the lower right hand corner when finished animation.

Animation-fill-mode can be one of four values: backwards, forwards, none or both. By default - none.

The value makes the element to move backwards after loading the page frame to 0%, even if the delay is set animation-delay, and stay there until you start the animation.

The value of forwards tells the browser what to stop the animation on the last frame at the end of the last repeat and wind off of the original sosttoyaniyu.

The value includes both the two values, remaining in the first keyframe before the start of the animation (despite the possible positive value of delay), and late on the last frame before the end of the last animation. Just what we need for our "bouncing":

. Butterfly {
-webkit-transform-origin:-20px-20px;
-moz-transform-origin:-20px-20px;
-webkit-animation:
Flitter 300ms ease-in-1s out 40 Alternate,
bouncing 10s ease-in-out Both 1s,
0.5s ease Rotation 24 1s forwards;
-moz-animation:
Flitter 300ms ease-in-1s out 40 Alternate,
bouncing 10s ease-in-1s out Both,
Rotation 24 0.5s 1s ease forwards;
animation:
300ms ease Flitter -in-out 1s 40 Alternate,
bouncing 10s ease-in-1s out Both,
Rotation 24 0.5s 1s ease forwards;
}

Stopping and starting the animation

In addition to stops the animation in the first and last frames we can octanavlivat it in the process of using animation-play-state. By default, all animations are set to 'running', but it can be changed to 'paused':

. Butterfly: hover {
-webkit-animation-play-State: PAUSED;
-moz-animation-play-State: PAUSED;
animation-play-State: PAUSED;
}

To see how this works, just hover your cursor over any of the previously animated butterflies.

We are dismantled simple animation, only to show what is possible. Effective CSS animations provide the ability to animate without using JavaScript. It is, however, do not forget that the possibility of animation does not mean that their use would be a good idea everywhere. Use animation judiciously. We would not want to go back to the situation with animated gif in the late 90s or outbursts of indiscriminate Flash-saver in the early 2000s

Remember, if you can, it does not mean that you should!



According to the materials articles Estelle Ueyl