The closer we get to the interface starting to work, the more understandable it becomes for the user. In life, almost nothing happens instantly - when opening a can of soda or closing our eyes before going to bed, we observe a bunch of intermediate states, and not a sharp “open/closed”, as happens on the web.

In my article I will share my knowledge about CSS animation and how to work with it. Animation gives websites dynamism and improves understanding of their capabilities. It brings web pages to life and helps in user interaction. Unlike CSS3 transitions, CSS animations are based on keyframes. Which allow you to play and repeat effects for a specified time, as well as stop the animation within the loop automatically.

An animation is a set of keyframes or keyframes stored in CSS:

@keyframes animation-test ( 0% ( width: 100px; ) 100% ( width: 200px; ) )

Let's look at what's going on here. The @keyframes keyword denotes the animation itself. Then comes the name of the animation, in our case animation-test. The curly braces contain a list of keyframes. We use a starting frame of 0% and an ending frame of 100% (they can also be written as from and to).
Take a look at the code below. Animation can also be set this way:

@keyframes animation-test ( from ( width: 0; ) 25% ( width: 75px; ) 75% ( width: 150px; ) to ( width: 100%; ) )

Remember, if a start or end frame is not specified, the browser will automatically detect them as if no animation had been applied to them.

You can connect animation to an element like this:

Element-selector ( animation-name: your-animation-name; animation-duration: 2.5s; )

The animation-name property specifies the name for the @keyframes animation. The animation-duration rule specifies the duration of the animation in seconds (1s, 30s, .5s) or milliseconds (600ms, 2500ms).

You can also group keyframes:

@keyframes animation-test ( 0%, 35% ( width: 50px; ) 75% ( width: 200px; ) 100% ( width: 100%; ) )

You can apply several animations to one element (selector). Their names and parameters should be written in the order of application:

Element-selector ( animation-name: anim-name-1, anim-name-2; animation-duration: 1s, 3s; )

Animation Delay:

The animation-delay property specifies the delay before the animation plays, in seconds or milliseconds:

Element-selector ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 2s; /* 2 seconds will pass before the animation starts */ )

Replay animation:

Using animation-iteration-count we can specify the number of times the animation will repeat: 0, 1, 2, 3, etc. Or infinite for looping:

Element-selector ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 4s; animation-iteration-count: 5; /* animation plays 5 times */ )

Element state before and after animation:

Using the animation-fill-mode property, it is possible to specify what state the element will be in before the animation starts and after it ends:

animation-fill-mode: forwards;- the animation element will be in the last keyframe state after completion/playback;

a nimation-fill-mode: backwards;- the element will be in the state of the first keyframe;

animation-fill-mode: both; - before the animation starts, the element will be in the state of the first keyframe, after completion - in the state of the last one.

Start and stop animation:

This is the responsibility of the animation-play-state property, which can take two values: running or paused.

Element-selector:hover ( animation-play-state: paused; )

Animation direction:

The animation-direction property specifies how to control the direction in which the animation plays. Here are the possible values:

animation-direction: normal; - animation is played in direct order;

animation-direction: reverse; - the animation is played in reverse order, from to to from;

animation-direction: alternate;- even animation repetitions are played in reverse order, odd ones - in forward order;

animation-direction: alternate-reverse; - odd animation repetitions are played in reverse order, even ones - in forward order.

Function of smooth output of animated frames:

The animation-timing-function property allows you to set a special function responsible for the animation playback speed. By default, the animation starts slow, accelerates quickly, and slows down at the end. We currently have the following predefined values: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end.

However, you can create such functions yourself. Meaning animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y); takes 4 arguments as input and builds a distribution curve for the animation process.

You can study in more detail or try out the creation of these functions on the website http://cubic-bezier.com

Finally, the animation can be broken down into a set of individual values ​​(steps) using the steps function, which takes as input the number of steps and the direction (start or end). In the example below, the animation consists of 5 steps, the last of which will occur right before the end of the animation:

Element-selector ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 5s; animation-iteration-count: 3; animation-timing-function: steps(5, end); )

Browser support for animation:

The values ​​in the table indicate the first browser version that fully supports the property.

Values ​​with -webkit-, -moz- or -O- indicate the first version that worked with the prefix.

On the website https://www.w3schools.com You can study CSS animation in more detail (with examples).
One of the popular libraries for working with animations is animate.css.

It may seem that the difficulties you encounter when working with CSS animations are not justified. But this is absolutely not true.

First, CSS is a powerful tool for improving the user experience of an interface. It does not greatly affect user productivity. Unlike JavaScript analogues. Technology, through the use computing power GPU allows browsers to quickly optimize the rendering speed of elements.

Secondly, the flexibility, speed and ease of implementing CSS animations will help “breathe life” into existing or new interfaces. Having developed general and original approaches and understood the specifics of the technology, you can create unique usability interfaces for almost all projects.

I hope you found in the article useful information for myself. Beautiful sites to all. Don't forget about animations :)

ATTENTION! Since in this lesson we will analyze animation, I will not be able to show you an example of its work in pictures, so feel free to open the code editor and write the code given in this article there.

Creation Basics

So, first of all, you need to start with how to create it. You are probably used to the fact that any thing in CSS is implemented by assigning the necessary properties with the appropriate values ​​to the desired selector. So, when creating animation, this is not enough. The diagram looks like this:

The transition effects themselves are created using @keyframes

The required element is given this same animation, as well as its parameters (all this using properties and their values).

So, first we need to describe the necessary changes in @keyframes, let's take a closer look at how to work with them.

@keyframes syntax

Actually, it will be easier for me to explain everything to you using a ready-made example, albeit a very simple one. Here it is (the code is added to the css file):

@keyframes pulse( 0%(font-size: 50px;) 50%(font-size: 60px;)) 100%(font-size: 50px;))

@keyframes pulse ( 0% (font-size: 50px;) 50% (font-size: 60px;))

So, after the @keyframes keyword there is an arbitrary word that will act as the name of the animation. In our case it is “pulse”. Next, open curly braces in which the necessary rules are written.

Percentages are the so-called timestamps at which the specified properties will be added to the element. In our case, what is written means the following: at the very beginning of execution, the font size will be 50 pixels, in the middle it will increase to 60, and at the end it will again decrease to the initial size.

The from and to keywords can replace the percentage entry; they indicate 0% and 100%, respectively, that is, the beginning and end of playback.

Putting Animation to Action

For now we just have code that generates an animation effect, but it is not used anywhere. If you refresh your web page, nothing will change. Accordingly, to apply animation, you need to perform two steps:

Select the element for which it will be applied

Link it to the rules described via @keyframes (via the name), and also set additional settings if necessary.

Let's try

In my html file, I created a block with the shadow class, which contains a simple line of text. Our goal is to apply the animation effects we described earlier to this text element.

There are two required properties that need to be specified in this case for everything to work. Firstly, this is the name that we wrote in the keyframes. Secondly, this is the duration of the animation, because without this parameter the browser simply will not be able to play it.

So, in addition to the styles that our block already has, we add new ones:

animation-name: pulse; animation-duration: 2s;

Thus, everything will be repeated 4 times, and then stop. As you understand, instead of four you can enter any number.

Endless animation in css3

Implemented very easily using this same property. In fact, you can just set the number of repetitions to a couple of thousand, this will be enough, but theoretically our animation will not repeat indefinitely.

animation-iteration-count: infinite;

animation - iteration - count : infinite ;

That's it, now we've done an endless repeat. I don’t recommend checking whether this is true after sitting behind a monitor all your life. This is simply used in cases where you want the effect to be constantly repeated and not disappear. If it is unobtrusive and does not distract the user, then why not.

Delay before start

By default, playback starts after the page has fully loaded. This behavior can be controlled using the animation-delay property. Its value is specified in seconds.

Direction

Another interesting property is animation-direction. By default it is set to normal; if you set it to reverse, then all the described frames will be executed in the opposite direction. Let's check what the difference is. To do this, I changed the effect a little by adding another frame.

@keyframes pulse( 0%(font-size: 50px;) 50%(font-size: 60px;) 70%(font-size: 80px;) 100%(font-size: 50px;))

@keyframes pulse ( 0% (font-size: 50px;) 50% (font-size: 60px;) 70% (font-size: 80px;) 100% (font-size: 50px;))

So, with a normal direction, in the first half of the animation the font size will increase to 60 pixels, then it will increase sharply again, to 80, after which it will return to its original position.

Rice. 2. Original text size

Rice. 3. The font size is almost at the end of the animation, before abruptly returning to its original state.

Now we ask:

animation-direction: reverse;

animation - direction : reverse ;

Everything turned upside down. First, the text will increase by as much as 30 pixels, up to 80, and for the rest of the animation it will gradually decrease, eventually returning to its previous size. It's simple.

Animation form

And this is perhaps one of the most interesting settings, which you can experiment with for a long time. By default, all changes are performed at the same speed. This type of animation is called linear, and there are others besides it.

Greetings, friends! Today we will look at a very interesting topic - creating CSS animations using a real example. The culmination of this tutorial will be creating a beautiful CSS animation of the Million Dollar Logo.

Cool

Stammer

Lesson materials

• Sources: Download
• Basic example from the lesson: https://codepen.io/agragregra/pen/PKNavm
• Starting template from the lesson: https://github.com/agragregra/optimizedhtml-start-template

A little theory

Before you start creating an animated example, you should go over the basics CSS Animations, consider basic terms, properties and rules CSS creation animations.

If you already had experience creating animations in any applications, such as Adobe After Effects or the old Flash Professional (now Adobe Animate), then you should be familiar with concepts such as “Keyframes”, “Temporary functions or motion dynamics”, which, as in any other area of ​​​​animation, apply to the animation of elements on a page using CSS. However, unlike working with application interfaces, you create your CSS animations by writing code in an editor.

CSS rule @keyframes

Creating a CSS animation begins by declaring the name of the animation in a block @keyframes and defining so-called animation steps or key frames.

To review the theory and basics, we will use pure CSS, and later, using a more complex example, we will use the Sass preprocessor. You can learn more about Sass in the lesson. In addition, for a deeper understanding of the basics of CSS, I also recommend reading the lessons “CSS Basics - A Guide for Little Ones” and “All CSS Selectors in One Lesson”

Let's look at the @keyframes structure and working with keyframes on simple example:

@keyframes turning ( 0% ( border-radius: 0 0 0 0; transform: rotate(0deg); ) 25% ( border-radius: 50% 0 0 0; transform: rotate(45deg); ) 50% ( border- radius: 50% 50% 0 0; transform: rotate(90deg); ) 75% ( border-radius: 50% 50% 50% 0; transform: rotate(135deg); ) 100% ( border-radius: 50% 50 % 50% 50%; transform: rotate(180deg); ) )

In the first line we see that after keyword@keyframes its name is “turning”. This is the name of the block of frameframes, which we will refer to further.

After the declaration, a curly brace opens (in in this example on pure CSS), in which properties are written sequentially from 0% to 100% for each key frame. Please note that between 0% and 100% you can insert as many intermediate values ​​as you like, be it 50%, 75% or even 83%. This is very similar to the timeline of an animation application, where you can add any intermediate state between two states.

Further, this block of code with keyframes can be applied to any CSS selector, but most often they are prepared for a specific selector if we want to achieve a certain behavior from the desired block.

Accessing a block of key frames

After we have set key frames for the object (in real life this is done in parallel or even after accessing the block with key frames), we can access our newly created block. Let's look at the following simple code from the example above:

Div ( width: 120px; height: 120px; background-color: violet; margin: 100px; animation: turning 2s ease-out 1s infinite alternate; )

Nothing special until the last line. Here we determine how the object will initially look and in the last line of the block we refer to the block of key frames called “turning”:

Animation: turning 2s ease-out 1s infinite alternate;

If everything is relatively clear with the definition of key frames, then this line needs immediate explanation. As we see, first comes CSS property"animation". This is a shorthand form, such as the property “margin: 20px 30px 40px 50px”, which can be divided into several separate properties:

By this analogy, the composite property “animation” can be divided into several separate properties:

animation-name	The name of the animation that is accessed from @keyframes
animation-duration	Duration or how long the execution of the CSS animation lasts. Can be specified in seconds (s) or milliseconds (ms)
animation-timing-function	Temporal function, dynamics of object movement or property changes ( ease- (by default) the animation starts slowly, accelerates and ends slowly; linear- animation occurs evenly; ease-in- starts slowly and speeds up towards the last key frame; ease-out- starts quickly and slows down smoothly at the end; ease-in-out- starts slowly and ends slowly)
animation-delay	Animation delay time BEFORE start. Also specified in seconds or milliseconds
animation-iteration-count	Number of repetitions (iterations) of animation ( infinite- infinite, or you can specify a simple number without units)
animation-direction	Animation direction, sequential, reverse or back-and-forth ( normal- (by default) the animation plays from start to finish and stops; alternate- plays from beginning to end and in the opposite direction; alternate-reverse- plays from end to beginning and back; reverse- the animation is played from the end.)
animation-play-state	Controlling animation playback ( paused(pause), running(launch), etc.). Can be applied on:hover or from a JS function if needed
animation-fill-mode	The state of the element before and after the animation plays. For example, the value backwards allows you to return all properties to their original state immediately after applying animation

Most often, experienced developers do not write all these properties separately, but use a short notation and its structure is as follows:

animation: (1. animation-name - name) (2. animation-duration - duration) (3. animation-timing-function dynamics of movement) (4. animation-delay - pause before start) (5. animation-iteration-count - number of executions) (6. animation-direction - direction)

Animation: animationname 2s linear 1s infinite reverse

From the example we see that we access the @keyframes animationname block, set the duration of the animation to 2 seconds, the dynamics are linear, the pause before starting is 1 second, the animation is repeated endlessly and executed in the opposite direction.

As I said earlier, the short notation begins with the property " animation", followed by values, the sequence of which is better not to forget, so that there is no confusion when writing CSS animation.

However, most of these properties can be omitted, since most often their default values ​​will completely satisfy most animation creation tasks. Some of them may not be written, but the rest should be indicated in the sequence that we discussed earlier. In general, for your animation to function, you only need two parameters in your composite property - the name ( animation-name) and duration ( animation-duration).

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 using a 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