Butt - css animation. Attachment - css animation A short recording of the animation: power animation

CSS3 animation Gives sites dynamism. Vaughn revives web pages, increasing interaction with the client. In addition to CSS3 transitions, the animation is based on key frames, which allows you to automatically create and repeat effects over a given hour, as well as stop the animation in the middle of the cycle.

CSS3 animation can be implemented practically for all html elements, as well as for pseudo-elements: before and after. A list of animated authorities is available on the page. When creating animation, do not forget about possible problems productivity, since changing existing authorities 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. Key frames

Keyframes are used to indicate the meaning of animation controls at various points in the animation. Keyframes represent the behavior of one animation cycle; The animation can be repeated zero or more times.

Keyframes are specified using the additional @keyframes rule, which is indicated as follows:

@keyframes Animation names (list of rules)

Animation creation begins with installation key personnel@keyframes rules. The frames indicate which authorities will be animated at which stage. Each frame can include one or more shock blocks from one or more power pairs and values. The @keyframes rule matches the element's animation, which binds the element's voicing rule and block.

@keyframes shadow (from (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) to (text-shadow: 0 0 3px black;))

Key frames are created for help key words from and to (equivalent to the values ​​of 0% and 100%) or with additional percentage points, which can be set at any time. You can also combine keywords and percentage points. If the cadres have the same power and importance, they can be united in one statement:

@keyframes move (from, to (top: 0; left: 0;) 25%, 75% (top: 100%;) 50% (top: 50%;))

If 0% or 100% frames are not specified, the browser creates them, calculating (as specified) the values ​​of the animated power.

Since a number of @keyframes rules are defined with the same names, the rest are applied in document order, and everything in front is ignored.

After the stunned @keyframes rules, we can rely on the new one in power animation:

H1 (font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out;)

It is not recommended to animate non-numeric values ​​(with a rare caveat), as the result may not be rendered in the browser. Also, you should not create key frames for power values ​​that do not create midpoints, for example, for power values ​​color: pink and color: #ffffff, width: auto and width: 100px or border-radius: 0 and border-radius: 50% (In this example, it would be correct to enter border-radius: 0%).

1.1. Timing function for key frames

The keyframe style rule can also interfere with the timing function, which requires that it be corrected when moving the animation to the next keyframe.

butt

@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 another key frame (between 0% and 25%), the enhancement function is selected. Between the second and third key frame (between 25% and 50%), the smooth acceleration function is selected. And so on. The element will move up the side by 50px, adjust as it reaches its high point, and then speed up as it drops to 100px. The other half of the animation is done in a similar manner, except that it moves the element 25px up the side.

The time clock function assigned to the key frame to or 100% is ignored.

2. Animation name: power animation-name

The animation-name power specifies a list of animations attached to the element. Each time you need to select a key frame in the rule, which determines the values ​​of the controls for the animation. Since the name does not correspond to every key frame in the rule, there is no power for the animation, and the animation will not wrap around.

If several animations try to change the same power, the animation ends closest to the end of the list of names.

Animations are case sensitive and the keyword none is not allowed. It is recommended to vikorize the name, which reflects the essence of the animation, in which case you can vikorist one or a number of words, crossed through a hyphen - or the underscore symbol _.

Power does not wane.

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. The power of animation: the power of animation-duration

The power of animation-duration means the duration of one animation cycle. Specified in seconds s or milliseconds ms. If more than one animation is specified for an element, you can set different hour for the skin, having transferred the meaning through coma.

Power does not wane.

syntax

Animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;

4. Timing function: power animation-timing-function

The animation-timing-function power describes how the animation will evolve between each pair of keyframes. When the animation stops, the time clock functions will not become stuck.

Power does not wane.

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;

For additional animation, you can create its effects, For example, the text or the indicator of attraction is affected.

5. Animation repeat: power animation-iteration-count

The animation-iteration-count power specifies how many times the animation cycle runs. A cob value of 1 means that the animation will run one cob until the end. This power is often combined with the values ​​of alternate power animation-direction, which causes the animation to be created in reverse order in alternative cycles.

Power does not wane.

syntax

Animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;

6. Direct animation: the power of animation-direction

The power of animation-direction means that animation must be created in reverse order in any or all cycles. If the animation is performed in reverse order, the time functions are also reversed. For example, when implemented in reverse order, the ease-in function will behave like ease-out.

Power does not wane.

To determine whether the animation cycle is repeated in pairs or unpaired, the number of repetitions starts from 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. Animation creation: the power of animation-play-state

The power of animation-play-state determines whether the animation will be started or executed. A link of animation in the middle of the cycle is possible through the use of power in JavaScript script. You can also stop the animation when the mouse cursor is hovering over an object - stan: hover.

Power does not wane.

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: the power of animation-delay

The power of animation-delay determines when the animation starts. Available in seconds s or milliseconds ms.

Power does not wane.

syntax

Animation-delay: 5s; animation-delay: 3s, 10ms;

9. State of the element before and after the creation of the animation: power animation-fill-mode

The power of animation-fill-mode determines the meaning of the animation pose and its appearance. When the animation ends, the element rotates to its output styles. After animation, the animation does not contribute to the power values ​​if the animation is set to the element - animation-name and animation-delay. In addition, once completed, the animation does not contribute to the values ​​of the authorities after its completion - animation-duration and animation-iteration-count. The power of animation-fill-mode can override this behavior.

Power does not wane.

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. Short recording of animation: power animation

All parameters of the created animation can be combined into one power - animation, passing them through a space:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

To create an animation, you only need to specify two controls - animation-name and animation-duration; other controls take on the meaning. The order of reorganization of power does not matter, however, the hour of the final animation animation-duration necessarily stands before the animation-delay.

11. Multiple animations

For one element, you can set a number of animations, changing their names through coma:

Div (animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;)

You can use the triviality of animation, repetition, directness, type of rukh and crocs. You can animate any elements, including pseudo-elements.

Obovyazkova Umova - the clarity of specific meanings. Powers with auto values ​​are NOT animated.

Safari currently does not support animation of pseudo-elements, to view the recording please use other browsers

Example of CSS animation:

Animation code example:

@keyframes move (40% (left: 50%; bottom: 75%; animation-timing-function: ease-in;) 80% (left: 90%; bottom: -10em;))

Animation connections:

Sun (animation: move 15s infinite linear;)

move - im'animation 15s - triviality infinite - endless repetition linear - ruhu type

@keyframes

The animation itself is set in the middle of the @keyframes block. After @keyframes the name of the animation is set, and then in the middle figured temples- її croki.

The terms can be specified through vidsotki or using the keywords from and to. In this case, you can change the type of animation (animation-timing-function):

Animation-name

Use wiki to set a name for the animation.

Possible values: one or more animation names. Significance for washing: none.

animation-name: move; - one animation. animation-name: move, sun-color; - two animations, names are specified via coma.

Animation-duration

The power of animation is controlled by the power of animation-duration.

Possible values: hour in seconds (s) or milliseconds (ms). For several animations, the hour for the skin can be set through a coma. Pochatkov value - 0s.

Animation-timing-function

Power refers to the type of animation.

Possible values:

smooth animation ease - forging (meaning for mating) linear - right side ease-in - acceleration to the end ease-out - acceleration to the cob ease-in-out - smoother forging, lower ease

cubic-bezier (number, number, number, number) allows you to specify a foldable animation type. Values ​​can be selected manually at cubic-bezier.com.

cubic-bezier(.24,1.49, .29, -0.48);

Pokrokov's animation step-start and step-end - allow you to set a step-by-step animation and always set specific steps. With step-start, changes are made to the beginning of the crop, and with step-end - at the end.

step-end If you enter step-start, the doctor will start in one.

steps (number) - allows you to specify the number of steps for which the animation will be displayed, in which case you can set only the remaining steps without having to specify the steps.

Animation-iteration-count

Controls animation repetitions. Values ​​for animation: 1 (the animation will play once).

Possible values:

number - how many times to play the animation. infinite - endless repetition.

Animation-direction

Refers to direct animation.

Possible values:

normal - the animation will play out in a straight line, from start to finish. reverse - the animation will play in the reverse direction, then from the end. alternate - the animation will play from start to finish, and then in the opposite direction. alternate-reverse - the animation will play from the end to the beginning, and then in the reverse direction.

Animation-play-state

Controls the pacing and progression of animation.

Possible values: running - the animation will play out (values ​​are set). paused - the animation stops at the first moment.

Manage the croque, if there is a delay, do not exit, but you can also stop the animation by: hover:

Animation-delay

Using the additional animation-delay, you can set the delay of the animation before the start of creation.

Possible values: hour in seconds (s) or milliseconds (ms). The meanings can be negative. For several animations, the hour for the skin can be set through a coma. Pochatkov value - 0s.

Animation-fill-mode

Power means whether the animation will flow onto the pose element after the hour the animation is created.

Possible values:

none - the animation flows onto the element only during the hour of creation, after completion the element turns into the cob mill. forwards - the animation flows onto the element after the creation is completed. backwards - the animation flows onto the element until it is created. both - the animation flows onto the element both before and after the creation is completed.

To ensure that backwards and both work until the animation begins, set the animation-delay: 3s; . So for whom it is sense to open the butt in the new window.

All these powers can be written down using another short notation, for example:

Animation: timing 5s infinite alternate;

Obvious meanings are animation and triviality. At first, the importance of the creation is respected by the triviality of creation, and at the other - by the hindrance.

The animation-delay power sets the cooldown hour before starting the animation cycle. A value of 0s or 0ms starts the animation in the second phase. Negative values ​​also include animation without shading, which may lead to a change in the appearance of the animation.

It is acceptable to indicate a certain value, overinflating them through a coma.

short information

syntax

animation-delay:<время> [,<время>]*

CSS animations are not required to start immediately after initialization. You can control this cob with the additional power of transition-delay. To mark the transition to the final hour, indicate him in significant power:

Transition-delay: 1s; / * Turn on the animation for one second * /

This power is of little use when implementing simple interactivity on a site, but it can be very cumbersome if you need to create more complex effects. By analogy with transition-duration, you can write down the shading hour for the skin power assigned to transition-property (at which it is also important to note the order of re-arrangement):

Transition-property: color, background-color, letter-spacing; transition-duration: 1s, .5s, 2s; transition-delay: 0s, 0s, 2s; / * Freezes letter-spacing animation for 2 seconds * /

Don’t forget about cross-browser compatibility - absolutely all the authorities of the family transition Vikoristannya Vendor prefixes:

Webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s;

More practical

In practice, the power of transition-delay often gets stuck when creating drop-down menus that open when the cursor is hovered over. In this category, it is recorded not only for the ear mill, but also for the end mill.

Perhaps you noticed that on some sites there are submenus, even though it’s easy to click on them. Avoiding this behavior is helped by the transition-delay power set for the primary element and for the element with the pseudo-class: hover. The values ​​will vary: for the initial state of power, the transition-delay value must be greater than zero, and for the state of the hovered cursor, it must be set to 0. Example:

Submenu (opacity: 0; transition-property: all; transition-duration: .5s; transition-delay: 1s;) .menu: hover .submenu (opacity: 1; transition-delay: 0s;)

This code will result in the menu appearing when the cursor is hovered over without fading, and the menu will fade for one second. This trick will definitely make the menu easier for a vikoristan.

Browser compatibility

The compatibility table on this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub