css3 animation delay. Examples - reverse css animation
CSS animation doesn't have to start immediately after it's initialized. You can control when it starts using the transition-delay property. To delay the transition for certain time, specify it in the property value:
Transition-delay: 1s; /* delay the start of the animation by one second */
This property is little used when implementing simple interactivity on a website, but it can be very useful if you have to create more complex effects. By analogy with transition-duration, you can write the delay time for each property specified in transition-property (it is also important to adhere to the order of enumeration):
Transition-property: color, background-color, letter-spacing; transition-duration: 1s, .5s, 2s; transition-delay: 0s, 0s, 2s; /* delay the letter-spacing animation by 2 seconds */
Don't forget about cross-browser compatibility - absolutely all family properties transition require the use of vendor prefixes:
Webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s;
Practical use
In practice, the transition-delay property is often used when creating drop-down menus that open when hovered over. In this case, it is written not only for the initial state, but also for the final one.
You may have noticed that on some sites, drop-down submenus disappear too quickly, making it difficult to find the right link and click on it. The transition-delay property, set for a regular element and for an element with the pseudo-class:hover, helps prevent this behavior. The values will be different: for a normal state the transition-delay property should be greater than zero, and for a hover state it should be 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 cause the menu to appear on hover without any delay, and disappear by one second. This trick will definitely make the menu more convenient to use.
The animation-delay property sets the amount of time to wait before starting the animation loop. A value of 0s or 0ms starts the animation immediately. A negative value also enables animation without delay, but may cause the animation to start to appear differently.
It is permissible to specify several values, listing them separated by commas.
brief information
Syntax
animation-delay:<время> [,<время>]*
Designations
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of the value. | <размер> |
| A && B | The values must be output in the order specified. | <размер> && <цвет> |
| A | B | Indicates that you need to select only one value from the proposed ones (A or B). | normal | small-caps |
| A || B | Each value can be used independently or together with others in any order. | width || count |
| Groups values. | [ crop || cross ] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word, or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times separated by commas. | <время># |
Example
Object Model
An object.style.animationDelay
Note
Chrome, Safari, and Android support the -webkit-animation-delay property.
Opera up to version 12.10 supports the -o-animation-delay property.
Firefox up to version 16 supports the -moz-animation-delay property.
Specification
Each specification goes through several stages of approval.
- Recommendation - The specification has been approved by the W3C and is recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
- Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of a draft that has been discussed and amended for community review.
- Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
- Draft ( Draft specification) - the first draft version of the standard.
Browsers
Browsers
The following notations are used in the browser table.
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 animations, do not forget about possible performance problems, 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 the from and to keywords (equivalent to the values 0% and 100%) or using percentage points, which can be specified 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
You can set several animations for one element by listing their names separated by commas:
Div (animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;)
| Initial value | 0s |
|---|---|
| Applies to | all elements ::before and ::after pseudo-elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
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
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
| animation-delay | Chrome Full support 43 Full support 43 Full support 3 Prefixed Prefixed | Edge Full support 12 | Firefox Full support 16 Notes Full support 16Notes Notes Before Firefox 57, Firefox does not repaint elements outside the viewport that are animated into the viewport with a delay. This bug affects only some platforms, such as Windows. Full support 49Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. Full support 5Prefixed Prefixed Implemented with the vendor prefix: -moz- | IE Full support 10 | Opera Full support 30 Full support 30 Full support 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit- No support 12.1 - 15 No support 12 - 15Prefixed Prefixed Implemented with the vendor prefix: -o- | Safari Full support 9 Full support 9 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | WebView Android Full support 43 Full support 43 Full support ≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | Chrome Android Full support 43 Full support 43 Full support 18 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | Firefox Android Full support 16 Full support 16 Full support 49 | |||
