). CSS3 provides us with another more powerful animation tool that goes beyond just one transition and allows us to create unlimited number of such transitions.
In other words, animation allows us to move from one state (set of properties) to second, from second To third, and even if necessary play the animation in reverse order when the number of transitions is completed.
Similar to transition effects, in order for an animation to play, you must trigger its playback, be it when the page first loads, or when an element gains focus, when the mouse pointer hovers over an element, and so on.
Stages of creating animation
Let's look at what the process of creating animation in CSS consists of. First, you need to define the key frames of the animation. What is a key frame? Imagine an element that is positioned to the left of the browser window and you need to animate it to the middle of the window and return it to its original position. For this animation we need three keyframes:
- First– defines the initial position of the element.
- Second– determines the position of the element after moving the element to the middle of the window.
- Third– defines the end point of the animation (the starting position of the element).
Once the necessary keyframes are defined, it will be up to the user's browser to draw all the intermediate phases that we have defined using the keyframes. That is, the task of drawing the element in these intervals lies solely with the browser; on our part, we only need to specify these animation points, or in other words, we must tell the browser how it should change from one style to another between key frames.
The next step is to assign animation to the element or elements we are interested in. In this case, it is possible to specify individual animation settings for each element.
Later in this article, we will look in detail at how to set an animation delay, how to set the number of animation cycles, set its duration, indicate its speed and direction, the state of the animation at the current moment, and even determine the style for an element at a time when the animation is not playing. .
Before we move on to creating animations, I would like to draw your attention to the current support for animation properties in browsers:
Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|
| 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
Defining Key Frames
The result of our example:
Consider the following example in which we will create several different animations and assign them to one element.
In this example, we created several animations in which the width of the element gradually increases, the background color changes, and the element tilts negatively relative to its axis X(horizontal axis) to the middle of the animation and the element shrinking to the original size of the element towards the end of the animation, which is accompanied by a change in the background color and the tilt of the element along the axis X reversed.
The result of our example:
Number of animation cycles
By default, any animation in CSS will play just one time. Thanks to the animation-iteration-count property, we will be able to specify how many times the animation loop will be played, this can be an arbitrary number of times, or we can indicate that the animation will play indefinitely, in some cases this is very useful.
Please note that it is forbidden to indicate negative values for objective reasons, but it is allowed to specify non-integer values, in which case only part of the animation cycle will be played - in proportion to the specified value (for example, the value 1.5 corresponds to playing the animation cycle one and a half times).
Consider the following example:
In this example we created simple animation, in which with using CSS top properties shift elements with relative positioning relative to the top edge of the current position, while changing the background color of the element.
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 have any experience creating animations in any application, such as Adobe After Effects or the aging Flash Professional (now Adobe Animate), then you should be familiar with concepts such as “Key frames”, “Timing functions or motion dynamics” ”, which, as in any other area of animation, are also applicable 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 the keyword @keyframes there is its name “turning”. This is the name of the block of frameframes, which we will refer to further.
After the declaration, a curly brace opens (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.
This block of code with keyframes can then 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 original state immediately after applying the 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).
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. The technology, by using the computing power of the GPU, allows browsers to quickly optimize the speed of rendering elements.
Secondly, flexibility, speed and simplicity CSS implementation 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 :)
CSS3 animation Gives sites dynamism. It brings web pages to life, improving the user experience. Unlike CSS3 transitions, animation creation is based on keyframes, which allow you to automatically play and repeat effects for a given time, as well as stop the animation within a loop.
CSS3 animation can be used for almost all html elements, as well as the:before and:after pseudo-elements. The list of animated properties is given on the page. When creating animation, do not forget about possible problems with performance, since changing some properties requires a lot of resources.
Introduction to CSS Animation
Browser support
IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44
1. Keyframes
Keyframes are used to specify animation property values at various points in the animation. Keyframes define the behavior of one animation cycle; the animation can repeat zero or more times.
Keyframes are specified using the @keyframes rule, defined as follows:
@keyframes animation name (rules list)
Animation creation begins with installation key frames@keyframes rules. Frames determine which properties will be animated at which step. Each frame may include one or more declaration blocks of one or more property and value pairs. The @keyframes rule contains the name of the element's animation, which links the rule and the element's declaration block.
@keyframes shadow ( from (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) to (text-shadow: 0 0 3px black;) )
Keyframes are created using keywords from and to (equivalent to the values 0% and 100%) or using percentage points, which can be set as many as you like. You can also combine keywords and percentage points. If frames have the same properties and values, they can be combined into one declaration:
@keyframes move ( from, to ( top: 0; left: 0; ) 25%, 75% (top: 100%;) 50% (top: 50%;) )
If 0% or 100% frames are not specified, then the user's browser creates them using the calculated (originally set) values of the animated property.
If multiple @keyframes rules are defined with the same name, the last one in document order will fire and all previous ones will be ignored.
Once the @keyframes rule is declared, we can reference it in the animation property:
H1 ( font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; )
It is not recommended to animate non-numeric values (with rare exceptions), as the result in the browser may be unpredictable. You should also not create keyframes for property values that do not have a midpoint, such as property values color: pink and color: #ffffff , width: auto and width: 100px , or border-radius: 0 and border-radius: 50% ( in this case, it would be correct to specify border-radius: 0%).
1.1. Timing function for key frames
A keyframe style rule can also declare a temporary function that should be used when the animation moves to the next keyframe.
Example
@keyframes bounce ( from ( top: 100px; animation-timing-function: ease-out; ) 25% ( top: 50px; animation-timing-function: ease-in; ) 50% ( top: 100px; animation-timing- function: ease-out; ) 75% ( top: 75px; animation-timing-function: ease-in; ) to ( top: 100px; ) )
Five keyframes are specified for the animation named "bounce". Between the first and second keyframe (that is, between 0% and 25%), the easing function is used. Between the second and third keyframe (that is, between 25% and 50%), the smooth acceleration function is used. And so on. The element will move up the page by 50px, slowing down as it reaches its highest point, and then speeding up as it drops to 100px. The second half of the animation behaves similarly, but only moves the element 25px up the page.
The timing function specified in the to or 100% keyframe is ignored.
2. Animation name: animation-name property
The animation-name property specifies the list of animations applied to the element. Each name is used to select a keyframe in a rule that provides property values for the animation. If the name does not match any keyframes in the rule, there are no properties to animate, or there is no animation name, the animation will not execute.
If multiple animations attempt to change the same property, the animation closest to the end of the list of names will execute.
The animation name is case sensitive and the none keyword is not allowed. It is recommended to use a name that reflects the essence of the animation, and you can use one or more words listed with a hyphen - or the underscore character _ .
The property is not inherited.
Syntax
Animation-name: none; animation-name: test-01; animation-name: -sliding; animation-name: moving-vertically; animation-name: test2; animation-name: test3, move4; animation-name: initial; animation-name: inherit;
3. Animation duration: animation-duration property
The animation-duration property specifies the duration of one animation cycle. Specified in seconds s or milliseconds ms. If an element has more than one animation specified, you can set a different time for each by listing the values separated by commas.
The property is not inherited.
Syntax
Animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;
4. Timing function: animation-timing-function property
The animation-timing-function property describes how the animation will progress between each pair of keyframes. During animation delay, timing functions are not applied.
The property is not inherited.
| animation-timing-function | |
|---|---|
| Values: | |
| linear | Linear function, animation occurs evenly throughout the entire time, without fluctuations in speed. |
| Bezier functions | |
| ease | The default feature, the animation starts slow, accelerates quickly, and slows down at the end. Corresponds to cubic-bezier(0.25,0.1,0.25,1) . |
| ease-in | The animation starts slowly and then smoothly speeds up at the end. Corresponds to cubic-bezier(0.42,0,1,1) . |
| ease-out | The animation starts quickly and slows down smoothly at the end. Corresponds to cubic-bezier(0,0,0.58,1) . |
| ease-in-out | The animation starts slowly and ends slowly. Corresponds to cubic-bezier(0.42,0,0.58,1) . |
| cubic-bezier(x1, y1, x2, y2) | Allows you to manually set values from 0 to 1. You can build any trajectory of the speed of animation change. |
| step functions | |
| step-start | Sets step-by-step animation, breaking the animation into segments, changes occur at the beginning of each step. Evaluated in steps(1, start) . |
| step-end | Step-by-step animation, changes occur at the end of each step. Evaluated in steps(1, end) . |
| steps(number of steps, step position) | A step time function that takes two parameters. The first parameter specifies the number of intervals in the function. This must be a positive integer greater than 0, unless the second argument is jump-none, in which case it must be a positive integer greater than 1. The second parameter, which is optional, specifies the step position - the point at which the animation begins, using one of the following values:
With the value start the animation starts at the beginning of each step, with the value end at the end of each step with a delay. Latency is calculated by dividing the animation time by the number of steps. If the second parameter is not specified, the default value end is used. |
| initial | |
| inherit | |
Syntax
Animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: initial; animation-timing-function: inherit;
Step-by-step animation can be used to create interesting effects, such as text being printed or a loading indicator.
5. Animation repetition: animation-iteration-count property
The animation-iteration-count property specifies the number of times the animation loop is played. A starting value of 1 means that the animation will play from start to finish once. This property is often used in conjunction with the animation-direction property's alternate value, which causes the animation to play in reverse order in alternate loops.
The property is not inherited.
Syntax
Animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;
6. Animation direction: animation-direction property
The animation-direction property determines whether the animation should play in reverse order on some or all loops. When the animation is played in reverse order, the timing functions are also reversed. For example, when played in reverse order, the ease-in function will behave like ease-out .
The property is not inherited.
| animation-direction | |
|---|---|
| Values: | |
| normal | All animation repeats play as specified. Default value. |
| reverse | All animation repeats play in the opposite direction from how they were defined. |
| alternate | Each odd repeat of the animation loop plays in the normal direction, each even repeat plays in the reverse direction. |
| alternate-reverse | Every odd repeat of the animation loop plays in the reverse direction, every even repeat plays in the normal direction. |
| initial | Sets the property value to the default value. |
| inherit | Inherits the property value from the parent element. |
To determine whether an animation loop repeat is even or odd, the number of repeats starts at 1.
Syntax
Animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; animation-direction: initial; animation-direction: inherit;
7. Playing animation: animation-play-state property
The animation-play-state property determines whether the animation will start or pause. Stopping animation within a loop is possible by using this property in a JavaScript script. You can also stop the animation when you hover the mouse over an object - state:hover .
The property is not inherited.
Syntax
Animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;
8. Animation delay: animation-delay property
The animation-delay property determines when the animation will start. Specified in seconds s or milliseconds ms.
The property is not inherited.
Syntax
Animation-delay: 5s; animation-delay: 3s, 10ms;
9. State of the element before and after playing the animation: animation-fill-mode property
The animation-fill-mode property determines what values are applied by the animation outside of its execution time. When the animation completes, the element returns to its original styles. By default, animation does not affect property values when animation is applied to an element - animation-name and animation-delay . Additionally, by default, animations do not affect the values of the animation-duration and animation-iteration-count properties after they are completed. The animation-fill-mode property can override this behavior.
The property is not inherited.
| animation-fill-mode | |
|---|---|
| Values: | |
| none | Default value. The element's state does not change before or after the animation plays. |
| forwards | Once the animation ends (as determined by the animation-iteration-count value), the animation will apply the property values at the time the animation ends. If animation-iteration-count is greater than zero, the values for the end of the last completed iteration of the animation are applied (not the value for the start of the iteration that comes next). If animation-iteration-count is zero, the applied values will be those that start the first iteration (same as in animation-fill-mode: backwards;). |
| backwards | During the period defined with animation-delay , the animation will apply the property values defined in the keyframe, which will begin the first iteration of the animation. These are either the from keyframe values (when animation-direction: normal or animation-direction: alternate) or the to keyframe values (when animation-direction: reverse or animation-direction: alternate). |
| both | Allows you to leave an element in the first keyframe before the animation begins (ignoring a positive delay value) and delay on the last frame until the end of the last animation. |
Syntax
Animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;
10. Brief description of animation: animation property
All animation playback parameters can be combined in one property - animation , listing them separated by a space:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
To play the animation, it is enough to specify only two properties - animation-name and animation-duration , the remaining properties will take their default values. The order in which the properties are listed does not matter, the only thing is that the execution time of the animation-duration must come before the animation-delay delay.
11. Multiple animations
For one element, you can set several animations, listing their names separated by commas:
Div (animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;)
You can control animation duration, repetition, direction, movement type, and steps. You can animate any elements, including pseudo-elements.
A prerequisite is the presence of specific values. Properties set to auto are not animated.
Safari does not currently support pseudo element animations, please use other browsers to view the entry.
CSS animation example:
Example animation code:
@keyframes move ( 40% ( left: 50%; bottom: 75%; animation-timing-function: ease-in; ) 80% ( left: 90%; bottom: -10em; ) )
Connecting animation:
Sun ( animation: move 15s infinite linear; )
move - animation name 15s - duration infinite - endless repetition linear - movement type
@keyframes
The animation itself is set inside the @keyframes block. After @keyframes the name of the animation is set, and then inside curly braces- her steps.
Steps can be specified using percentages or using the from and to keywords. In this case, you can change the type of animation in steps (animation-timing-function):
Animation-name
Used to set the name of the animation.
Possible values: one or more animation names. Default value: none.
animation-name: move; - one animation. animation-name: move, sun-color; - two animations, names separated by commas.
Animation-duration
The duration of the animation is controlled by the animation-duration property.
Possible values: time in seconds (s) or milliseconds (ms). In the case of several animations, the time for each of them can be specified separated by commas. The initial value is 0s.
Animation-timing-function
The property defines the animation type.
Possible values:
Smooth animation ease - sliding (default value) linear - smooth movement ease-in - acceleration towards the end ease-out - acceleration at the beginning ease-in-out - smoother sliding than ease
cubic-bezier(number,number,number,number) allows you to specify a complex animation type. It is convenient to select the values at cubic-bezier.com.
cubic-bezier(.24,1.49,.29,-0.48);
Step-by-step animation step-start and step-end - allow you to set step-by-step animation, be sure to set specific steps. In this case, with step-start changes occur at the beginning of the step, and with step-end - at the end.
step-end If you set step-start , the counter will start from ones.
steps(number) - allows you to set the number of steps in which the animation will be performed, while you can set only the last step without the need to specify intermediate ones.
Animation-iteration-count
Controls the repetition of the animation. Default value: 1 (animation plays once).
Possible values:
number - how many times to play the animation. infinite - endless repetition.
Animation-direction
Responsible for the direction of animation.
Possible values:
normal - the animation plays in the normal direction, from beginning to end. reverse - the animation is played in the opposite direction, that is, from the end. alternate - the animation is played from beginning to end, and then in the opposite direction. alternate-reverse - the animation is played from the end to the beginning, and then in the opposite direction.
Animation-play-state
Controls the stopping and playing of the animation.
Possible values: running - animation is played (default value). paused - the animation freezes on the first step.
It is not possible to control the step where the stop will be, but you can stop the animation by: hover:
Animation-delay
With animation-delay you can set a delay for the animation before it starts playing.
Possible values: time in seconds (s) or milliseconds (ms). Values can be negative. In the case of several animations, the time for each of them can be specified separated by commas. The initial value is 0s.
Animation-fill-mode
The property determines whether the animation will affect the element outside of the animation's playback time.
Possible values:
none - the animation affects the element only during playback; upon completion, the element returns to its original state. forwards - the animation affects the element after playback ends. backwards - the animation affects the element before playback begins. both - animation affects the element both before and after playback ends.
To see how backwards and both work before the animation starts playing, set animation-delay: 3s; . It also makes sense to open the example in a new window.
All these properties can be written using short note, For example:
Animation: timing 5s infinite alternate;
Required values are the animation name and duration. The first time value is considered the playback duration, the second - the delay.
