This is an experimental technology
Since the specification of this technology has not yet stabilized, please see for usage in different browsers. Also note that the syntax and behavior of the experimental technology may change in future browser versions following specification changes.

CSS animations allow you to animate transitions from one CSS style configuration to another. CSS animations consist of two components: a style description of the animation and a set of keys that define the start, end, and possibly intermediate states of the animated styles.

There are three advantages of CSS animation over traditional methods:

1. Easy to use for simple animations; You can create animation without knowing JavaScript.
2. Animations will work well even under moderate system loads. Simple animations In JavaScript, if they are poorly written, they often perform poorly. The engine can use frame-skipping and other techniques to keep performance at such a high level.
3. Allows the browser to control the animation sequence, thereby optimizing browser performance and efficiency. For example, reducing the refresh rate of animation frames in non-viewable areas this moment tabs.

Configuring Animation

In the style for an element, it defines a paragraph of text.">

The animation-duration property specifies that the animation should take 3 seconds to complete from start to finish, and that the name for the @keyframes describing the animation itself is defined as "slidein".

The element defines a paragraph of text.">

You can add other custom styles to decorate it, but we only wanted to demonstrate the animation effect here.

Keys are defined using the @keyframes rule. IN in this case we only have two keys. The first one at 0% animation (from). Here we give the element a left padding of 100% and a width of 300% (three times the width of the parent element). This causes the title to define a paragraph of text during the first frame of the animation.">

is located outside the right edge of the browser window.

The second key (to) determines the end of the animation, i.e. (100%). The left padding is set to 0 and the width to 100%. It looks like the title defines a paragraph of text.">

floats to the left edge of the browser window.

Adding other keywords

Let's add other keys to the previous example. Let's say we want the title font size to temporarily increase as we move to the left, and then return to its original value. This is easy to implement using the following key:

75% ( font-size: 300%; margin-left: 25%; width: 150%; ) p ( animation-duration: 3s; animation-name: slidein; ) @keyframes slidein ( from ( margin-left: 100% ; width: 300%; ) to ( margin-left: 0%; width: 100%; ) 75% ( font-size: 300%; margin-left: 25%; width: 150%; ) )

The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.

This tells the browser that when the animation is 75% done, the font should be 300% and the width 150%.

(Refresh the page to see the animation, or click the CodePen button to play it in the CodePen window)

Repeat setting

To set up repetition, you need to add the animation-iteration-count property and give it a value equal to the number of times the animations need to be repeated. In this case, let's set the value to infinite to repeat infinitely:

P ( animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; ) @keyframes slidein ( from ( margin-left: 100%; width: 300%; ) to ( margin-left: 0% ; width: 100%; ) )

The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.

Move text left and right

So we've got the repeating set up, but there's something strange. With each repetition, the text again “jumps” off the edge of the browser window. What we want is for the text to move left and right. This can be easily achieved by setting the property to alternate:

P ( animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; ) @keyframes slidein ( from ( margin-left: 100%; width: 300%; ) to ( margin-left: 0%; width: 100%; ) )

The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.

Using Shortcodes

The animation shortcode is useful for saving space in your code. For example, the rule we use in this article is:

P ( animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction:alternate; )

can be replaced with:

P ( animation: 3s infinite alternate slidein; )

Setting multiple values ​​for animation properties

The CSS animation property can have multiple values, separated by commas, this is used to specify multiple animation values ​​in one rule and set different durations, number of repetitions, etc. for different animations. Let's look at a few examples to see the difference:

In the first example, the animation name property is set to three values, and the duration and number of repetitions properties are set to one each. In this case, all three animations have the same duration and number of repetitions:

Animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 3s; animation-iteration-count: 1;

The second example sets three values ​​for each of the properties. In this case, each animation is executed with the corresponding values ​​in each property, so for example fadeInOut has a duration of 2.5s and a repetition count of 2, etc.

Animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s, 1s; animation-iteration-count: 2, 1, 5;

The third example defines three values ​​for the animation name, but two values ​​for the duration and number of repetitions. In the case where the number of values ​​is not enough for each animation, the values ​​are taken cyclically from start to finish. For example, fadeInOut will have a duration of 2.5s, and moveLeft300px will have a duration of 5s. The duration values ​​have run out, now they are taken from the beginning - bounce will get a duration of 2.5s. The value for the number of repetitions (as well as other specified properties) will be determined in the same way.

Animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1;

Using Animation Events

You can gain additional control over the animation as well useful information about her, with the help animation events. These events, represented by an AnimationEvent object, can be used to determine when an animation begins and ends, or when a new iteration begins. Each event contains the point in time at which it occurred, as well as the name of the animation that caused the event.

We will modify the text to display some information about each animation event. This way we can see how it works.

Adding CSS

Let's start with adding CSS. The animation will last 3s, will be called "slidein", will repeat 3 times, and also the value animation-direction installed alternate. The @keyframes keys have their width and left padding set to such that the element will slide across the screen.

Slidein ( -moz-animation-duration: 3s; -webkit-animation-duration: 3s; animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; animation- direction: alternate; ) @-moz-keyframes slidein ( from ( margin-left:100%; width:300% ) to ( margin-left:0%; width:100%; ) ) @-webkit-keyframes slidein ( from ( margin-left:100%; width:300% ) to ( margin-left:0%; width:100%; ) ) @keyframes slidein ( from ( margin-left:100%; width:300% ) to ( margin -left:0%; width:100%; ) )

Adding an Animation Event Handler

We'll use JavaScript to track all three possible animation events. The following code configures the handler; we call it when the document is first loaded.

Var e = document.getElementById("watchme"); e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false); e.className = "slidein";

It's pretty standard code; You can get Additional information See the documentation for element.addEventListener() . The last thing this code does is set the "slidein" class to the element being animated; we do this to start the animation.

Why? Because in our case, the animationstart event occurs as soon as the animation starts, and this happens before our script is executed. This way we can control the start of the animation ourselves by inserting a "slidein" class for the element being animated.

Event registration

Events will be passed to the listener() function shown below.

Function listener(e) ( var l = document.createElement("li"); switch(e.type) ( case "animationstart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case " animationend": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "animationiteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; ) document.getElementById(" output").appendChild(l); )

This code is also very simple. This code watches event.type to determine the event type and adds the element

to log the event that occurred.

The output when the animation ends will look something like this:

• Started: elapsed time is 0
• New loop started at time 3.01200008392334
• New loop started at time 6.00600004196167
• Ended: elapsed time is 9.234000205993652

Please note that the time shown in the output and the time we specified in the styles will not be the same. Also note that the animationiteration event is not sent after the iteration ends; the animationend event is sent instead.

HTML

For the sake of completeness, we will provide HTML. The markup contains a tag ul where all the information is displayed:

Watch me move

This example shows how to use CSS animations to make p elements move across the page.

In addition, we output some text each time an animation event fires, so you can see them in action.

We recently saw that transitions- it's just a way animations style properties from original before final condition.

So transitions in CSS are specific type of animation, where:

• there are only two states: beginning and end;
• the animation is not looped;
• intermediate states are controlled only by a time function.

But what if you want:

• have control over intermediate states?
• loop animation?
• do different types animations for one element?
• animate a specific property only on half ways?
• imitate various functions time for different properties?

Animation in CSS allows you to do all this and more.

Animation is like a mini-film, where you, as a director, give instructions (style rules) to your actors ( HTML elements) For different scenes(key frames).

Animation Properties

Like transition , the animation property is abbreviated for a few others:

• animation-name : animation name;
• animation-duration : how long the animation lasts;
• animation-timing-function : how intermediate states are calculated;
• animation-delay : animation starts after some time;
• animation-iteration-count : how many times the animation should be executed;
• animation-direction : should the movement go in reverse side or not;
• animation-fill-mode : what styles are applied before the animation starts and after it ends.

Quick example

To animate the download button, you can write an animation bouncing:

@keyframes bouncing( 0% ( bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100% ( bottom: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0.1); ) .loading-button ( animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both; )

First you need to write an actual bouncing animation using @keyframes and call it .

I used abbreviated animation property and included all possible options:

• animation-name: bouncing (same as keyframe name)
• animation-duration: 0.5s (half a second)
• animation-timing-function: cubic-bezier(0.1,0.25,0.1,1)
• animation-delay: 0s (no delay)
• animation-iteration-count: infinite (plays endlessly)
• animation-direction: alternate (goes back and forth)
• animation-fill-mode: both

@keyframes

Before applying animation to HTML elements, you need write an animation using keyframes. In general, key frames are each intermediate step in animation. They are determined using percentages:

• 0% - first step of animation;
• 50% is the halfway step in the animation;
• 100% is the last step.

Can also be used keywords from and to instead of 0% and 100%, respectively.

You can define as many keyframes as you want, like 33%, 4% or even 29.86%. In practice, you will only write some of them.

Every key frame is CSS rule , this means you can write CSS properties as usual.

To define an animation, simply write the keyword @keyframes with it name:

@keyframes around ( 0% ( left: 0; top: 0; ) 25% ( left: 240px; top: 0; ) 50% ( left: 240px; top: 140px; ) 75% ( left: 0; top: 140px ; ) 100% ( left: 0; top: 0; ) ) p ( animation: around 4s linear infinite; )

Note that the start 0% and end 100% contain same rules CSS. This ensures that the animation loops perfectly. Since the iteration counter is set to infinite , the animation will go from 0% to 100% and then immediately back to 0% and so on indefinitely.

animation-name

Name animation is used by at least, twice:

• at writing animations using @keframes ;
• at use animation using the animation-name property (or the animation shorthand property).
@keyframes whatever ( /* ... */ ) .selector ( animation-name: whatever; )

Like names CSS classes, the animation name can only include:

• letters (a-z);
• numbers (0-9);
• underscore(_);
• hyphen (-).

The name cannot begin with a number or two hyphens.

animation-duration

Like transition duration, the duration of the animation can be set to seconds(1s) or milliseconds(200ms).

Selector ( animation-duration: 0.5s; )

The default value is 0s, which means no animation at all.

animation-timing-function

Like time functions for transitions, time functions for animation can use keywords, such as linear , ease-out or can be defined using arbitrary ones Bezier curves.

Selector ( animation-timing-function: ease-in-out; )

Default value: ease.

Since animation in CSS uses keyframes, you can set linear function of time and simulate specific Bezier curve by defining many very specific key frames. Check out Bounce.js for advanced animation.

animation-delay

As with transition delay, animation delay can be set to seconds(1s) or milliseconds(200ms).

The default is 0s, which means no delay of any kind.

Useful when including multiple animations in series.

A, .b, .c ( animation: bouncing 1s; ) .b ( animation-delay: 0.25s; ) .c ( animation-delay: 0.5s; )

animation-iteration-count

By default, the animation only plays once(value 1). You can set three types of values:

• whole numbers, like 2 or 3;
• fractional numbers like 0.5, which will only play half the animation;
• the infinite keyword, which will repeat the animation endlessly.
.selector ( animation-iteration-count: infinite; )

animation-direction

The animation-direction property specifies whether in what order key frames are read.

• normal : starts at 0%, ends at 100%, starts at 0% again.
• reverse : starts at 100%, ends at 0%, starts at 100% again.
• alternate : starts at 0%, goes to 100%, returns to 0%.
• alternate-reverse : starts at 100%, goes to 0%, returns to 100%.

This is easier to imagine if the animation iteration count is set to infinite .

animation-fill-mode

The animation-fill-mode property determines what happens before start of animation and after its completion.

When determining key frames can be specified CSS rules , which will be applied at different animation steps. Now these CSS rules can collide with those who already applied to animated elements.

animation-fill-mode lets you tell the browser if animation styles Also should be applied beyond animation.

Let's imagine button, which is:

• red default;
• becomes blue at the beginning of the animation;
• and in the end green when the animation is complete.

CSS3 animation is quite widely used. It's time for even the most novice website builders to understand what CSS animation is and how to create it. You might think that CSS3 animation is all about making blocks move and it looks like a cartoon. But CSS animation is not only about moving an element from one point to another, but also about distortion and other transformations. To make this clear even for beginners, I wrote everything down step by step.

1. Basic properties of CSS3 animation

A small theoretical block from which you will understand which CSS3 properties are responsible for animation, as well as what values ​​they can take.

• animation-name— a unique name for the animation (key frames, we’ll talk about them below).
• animation-duration— animation duration in seconds.
• animation-timing-function— animation speed change curve. At first glance it is very unclear. It is always easier to show with an example, and you will see them below. Can take the following values: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n) .
• animation-delay— delay in seconds before the animation starts.
• animation-iteration-count— number of animation repetitions. It can be specified either simply as a number, or you can specify infinite and the animation will run endlessly.

Here are just the basic properties, which are more than enough to create your first CSS3 animation.

The last thing we need to know and understand from theory is how to create key frames. This is also easy to do and is done using the @keyframes rule, within which the key frames are specified. The syntax for this rule is as follows:

Above we set the first and last frame. All intermediate states will be calculated AUTOMATICALLY!

2. Real CSS3 Animation Example

The theory, as usual, is boring and not always clear. It's much easier to see everything on real example, but it’s best to do it yourself on some test HTML page.

When learning a programming language, you usually write a “Hello, world!” program, from which you can understand the syntax of this language and some other basic things. But we are not studying a programming language, but a description language appearance document. Therefore, we will have our own “Hello, world!”

Here's what we'll do for example: let us have some kind of block

will initially have a width of 800px and will be reduced to 100px in 5 seconds.

It seems that everything is clear - you just need to compress the block

and that's it! Let's see what it looks like in reality.

At first HTML markup. It's very simple because we're only working with one element per page.

1	<div class = "toSmallWidth" >

And here's what's in the style file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth ( margin : 20px auto ; /*external margins at the top and bottom of 20px and alignment in the middle*/ background:red; /*red background of the block*/ height: 100px; /*block height 100px*/ width: 800px; /*initial width 800px*/-webkit-animation-name : animWidthSitehere; -webkit-animation-duration : 5s; /* property with prefix for Chrome browsers, Safari, Opera */ animation-name : animWidthSitehere; /* indicate the name of the key frames (located below)*/ animation-duration: 5s; /*set the duration of the animation*/ } /* keyframes with prefix for Chrome, Safari, Opera browsers */ @-webkit-keyframes animWidthSitehere ( from (width: 800px;) to (width: 100px;)) @keyframes animWidthSitehere ( from (width: 800px;) /*first keyframe where the block width is 800px*/ to (width: 100px;) /*last keyframe, where the block width is 100px*/ }

As you can see, we specified only the first and last key frame, and all intermediate ones were “built” automatically.

Your first CSS3 animation is ready. To consolidate the knowledge gained, create HTML document And CSS file, and insert there (a better with your hands print) the code from the example. Then you will definitely understand everything. Then try the same with the height of the block (it should decrease in height) to secure the material.

3. More complex CSS3 animation examples

Above you learned how to easily create CSS3 animation. If you tried to do this with your own hands, you already understood the whole process and now you want to find out how you can create a more complex and beautiful animation. And it really can be created. Below there are 3 lessons where animation is created in the same way as in the example above.

3 Lessons on CSS Animation (Transformations)

The lessons will help you understand CSS animation even better. The main thing is to try to repeat what you see in the lessons. Or at least try changing property values ​​and see what happens, then you will become less afraid of CSS.

| 18.02.2016

CSS3 opens up unlimited possibilities for UI designers, and the main advantage is that almost any idea can be easily implemented and brought to life without resorting to the use of JavaScript.

It's amazing how simple things can liven up an ordinary web page and make it more accessible to users. It's about about CSS3 transitions, which can be used to allow an element to transform and change style, for example, on hover. The nine CSS3 animation examples available below will help you create a responsive feel on your site, as well as improve the overall look of the page with beautiful, smooth transitions.

For more detailed information, you can download the archive with files.

All effects work using the transition property. transition- “transition”, “transformation”) and the pseudo-class:hover, which determines the style of the element when the mouse cursor hovers over it (in our tutorial). For our examples we used div block 500x309 pixels in size, initial background color #6d6d6d and transition duration from one state to another 0.3 seconds.

Body > div ( width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; )

1. Change color on hover

Once upon a time, implementing such an effect was quite a painstaking job, with mathematical calculations of certain RGB values. For now it’s enough to write down CSS style, in which you need to add the pseudo-class:hover to the selector and set background color, which smoothly (in 0.3 seconds) will replace the original background color when you hover over the block:

Color:hover ( background:#53ea93; )

2. Appearance of the frame

An interesting and striking transformation is the inner frame that smoothly appears when you hover the mouse. Good for decoration various buttons. To achieve this effect, we use the pseudo-class:hover and the box-shadow property with the inset parameter (sets the shadow inside the element). In addition, you will need to set the shadow stretch (in our case it is 23px) and its color:

Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )

3. Swing

This CSS animation is an exception, because the transition property is not used here. Instead we used:

• @keyframes is a basic directive for creating frame-by-frame CSS animation, which allows you to do the so-called. storyboard and describe the animation as a list of key points;
• animation and animation-iteration-count - properties for setting animation parameters (duration and speed) and the number of cycles (repetitions). In our case, repeat 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); transform: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform : translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) .swing:hover ( -webkit-animation: swing 0.6s ease; animation: swing 0.6s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; )

4. Attenuation

The fade effect is essentially normal change element transparency. The animation is created in two stages: first you need to set the initial transparency state to 1 - that is, complete opacity, and then specify its value when hovering the mouse - 0.6:

Fade ( opacity: 1; ) .fade:hover ( opacity: 0.6; )

For the opposite result, swap the values:

5. Magnification

To make the block larger when hovered over, we will use the transform property and set it to scale(1.2) . In this case, the block will increase by 20 percent while maintaining its proportions:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Reduction

Making an element smaller is just as easy as making it larger. If in the fifth point to increase the scale we needed to specify a value greater than 1, then to reduce the block we will simply specify a value that will be less than one, for example, scale(0.7) . Now, when hovering the mouse, the block will proportionally shrink by 30 percent of its original size:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Transformation into a circle

One of the commonly used animations is a rectangular element that transforms into a circle when hovered over. Using property CSS border-radius, used in conjunction with :hover and transition , this can be implemented without problems:

Circle:hover ( border-radius: 70%; )

8. Rotation

A fun animation option is to rotate an element by a certain number of degrees. To do this, we will need the transform property again, but with a different value - rotateZ(20deg) . With these parameters, the block will be rotated 20 degrees clockwise relative to the Z axis:

Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D shadow

Designers' opinions differ on whether it is appropriate this effect in flat design. However, this CSS3 animation is quite original and is also used on web pages. Achieve three-dimensional effect We will use the already familiar box-shadow properties (will create a multi-layer shadow) and transform with the translateX(-7px) parameter (will ensure the block is shifted horizontally to the left by 7 pixels):

Threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX( -7px); transform: translateX(-7px); )

Browser support

The following browsers currently support the transition property:

Desktop browsers
Internet Explorer	Supported by IE 10 and above
Chrome	Supported from version 26 (until version 25 works with the -webkit- prefix)
Firefox	Supported from version 16 (in versions 4-15 it works with the -moz- prefix)
Opera	Supported from version 12.1
Safari	Supported from version 6.1 (in versions 3.1-6 it works with the -webkit- prefix)

The rest of the properties used in these examples, such as transform , box-shadow , etc., are also supported by almost all modern browsers. However, if you are going to use these ideas for your projects, we strongly recommend that you double-check cross-browser compatibility.

We hope you found these CSS3 animation examples helpful. We wish you creative success!