Examples - reverse css animation. Examples - reverse css animation Delay css3 animation
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;
Using step-by-step animation you can 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. Initial value 1 means 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 repetition of the animation loop plays in the reverse direction, every even repetition 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 given, and then inside the curly braces are its 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 a short notation, 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.
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.
Delay CSS animation on repeat (5)
Heres a little snippet that shows the same thing 75% of the time, then it slides. This repeating pattern emulates latency well:
@-webkit-keyframes slide ( 0% (background-position: 0 0;) 25% (background-position: 0 0;) 50% (background-position: 0 0;) 75% (background-position: 0 0; ) 100% (background-position: 13em 0;) ) @-moz-keyframes slide ( 0% (background-position: 0 0;) 25% (background-position: 0 0;) 50% (background-position: 0 0;) 75% (background-position: 0 0;) 100% (background-position: 13em 0;) ) @keyframes slide ( 0% (background-position: 0 0;) 25% (background-position: 0 0 ;) 50% (background-position: 0 0;) 75% (background-position: 0 0;) 100% (background-position: 13em 0;) )
I recently discovered how to use CSS animations "correctly" (I had previously dismissed them as not being able to create complex sequences like you could in JavaScript). So now I'm learning about them.
For this effect, I try to have a gradient "flash" cover the progress-like element. Similar to the effect on Windows Vista/7's native progress bars.
@keyframes barshine ( from (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%));) to (background -image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) ) .progbar ( animation: barshine 1s 4s linear infinite; )
As you can see, I'm trying to get a 4 second delay followed by a 1 second flash, repeating.
However, it seems that the animation-delay is only applied to the first iteration, after which the glitter just keeps waving around.
I "solved" this issue as follows:
@keyframes expbarshine ( from (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%));) 80% ( background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);) to (background-image:linear-gradient (120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) .progbar ( animation: barshine 5s linear infinite; )
from and 80% are exactly the same, resulting in a "delay" of 80% of the animation length.
This works, but for my next animation I need the delay to be variable (constant for a specific element, but variable among elements using the animation) while the animation itself remains the same length.
With the above "solution", I get a slower animation when all I want is a longer delay.
Is it possible to have animation-delay applied to all iterations, not just the first one?
minitech is correct that animation-delay specifies the delay before the animation starts and NOT delay between iterations. The spec draft editor describes this well, and there was a discussion here about this feature you describe that offers this iteration delay feature.
While there may be a workaround in JS, you can fake this iteration delay to flash the progress bar using just CSS.
By declaring the torch div's position position:absolute and the parent div's overflow: hidden , setting the keyframe's 100% state larger than the width of the progress bar, and playing with the cubic bezier timing function and left offset values, you can emulate a light ease mode -in-out or linear time with “delay”.
It would be interesting to write a smaller/scss mixin to accurately calculate the left shift and time function to get this exactly, but I don't have time to play with it right now. I'd love to see something like this!
Here's a demo I put together to show this. (I tried to emulate the Windows 7 progress bar and fell a bit, but it demonstrates what I'm talking about)
/* CSS */ @keyframes progress ( from ( width: 0px; ) to ( width: 600px; ) ) @keyframes barshine ( 0% ( left: -100px; ) 100% ( left: 1000px; ) ) .flare ( animation -name: barshine; animation-duration: 3s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.14, .75, .2, 1.01); animation-iteration -count: infinite; left: 0; top: 0; height: 40px; width: 100px; position: absolute; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%, rgba( 255,255,255,0) 87%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)) , color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255 ,0) 87%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* IE6-9 fallback on horizontal gradient */ z-index: 10; ) .progress ( animation-name: progress; animation-duration: 10s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; position: relative; z-index: 1; height: 100%; width: 100%; border-right: 1px solid #0f9116; background: #caf7ce; /* Old browsers */ background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color- stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18 %,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96% ); /* IE10+ */ background: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */ filter: progid:DXImageTransform. Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ ) .progress:after ( content: ""; width: 100%; height: 29px; right: 0; bottom: 0; position: absolute; z-index: 3; background: -moz- linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left , rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(202,247,206,0) 0 %,rgba(42,178,42,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100 %); /* IE10+ */ background: linear-gradient(to right, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft .gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ ) .bar ( margin-top: 30px; height: 40px; width: 600px; position: relative ; border: 1px solid #777; border-radius: 3px; )
I had a similar problem and used
@-webkit-keyframes pan ( 0%, 10% ( -webkit-transform: translate3d(0%, 0px, 0px); ) 90%, 100% ( -webkit-transform: translate3d(-50%, 0px, 0px) ; ) )
The bit annoying is that you have to fake your duration to account for "delays" on both ends.
This is what you should do. It should work so that you have a 1 second animation and then a 4 second delay between iterations:
@keyframes barshine ( 0% ( background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%); ) 20% ( background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%); ) .progbar ( animation: barshine 5s 0s linear infinite ; )
So I've been messing around with this a lot and you can do it without being very hacked. This is the easiest way to set a delay between animation iterations: 1. SUPER EASY and 2. just requires a little logic. Check out this dance animation I made:
Dance( animation-name: dance; -webkit-animation-name: dance; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; ) @keyframes dance ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); ) 25 % ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate( -120deg); ) 50% ( -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); ) 100% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform : rotate(0deg); ) ) @-webkit-keyframes dance ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg ); transform: rotate(0deg); ) 20% ( -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate( 20deg); transform: rotate(20deg); ) 40% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms- transform: rotate(-120deg); transform: rotate(-120deg); ) 60% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); ) 80% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate( -120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); ) 95% ( -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o- transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); ) )
I actually came here trying to figure out how to delay an animation when I realized that you just 1. extend the duration of the animation and dial up the proportion of time for each animation. Beore I had them each lasting 0.5 seconds for a total duration of 2.5 seconds. Now let me say that I wanted to add a delay equal to the total duration, so the delay is 2.5 seconds.
The animation time is 2.5 seconds and the delay is 2.5, so you change the duration to 5 seconds. However, since you have doubled the total duration, you need to halve the animation portion. Check out the latest below. This worked great for me.
@-webkit-keyframes dance ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); ) 10% ( -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg) ; transform: rotate(20deg); ) 20% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); ) 30% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms -transform: rotate(0deg); transform: rotate(0deg); ) 40% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg ); -ms-transform: rotate(-120deg); transform: rotate(-120deg); ) 50% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); ) )
These are your calculations that you probably use to figure out how to change the animation duration and % of each part.
wish_duration = x
wish_duration = animation_part_duration1 + animation_part_duration2 + ... (and so on)
total duration = x + y
animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_duration
I made a poster on the wall that moves left and right at intervals. For me this works:
Div-animation ( -webkit-animation: bounce 2000ms ease-out; -moz-animation: bounce 2000ms ease-out; -o-animation: bounce 2000ms ease-out; animation: bounce 2000ms ease-out infinite; -webkit-animation -delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55% 10%; ) @-webkit-keyframes bounce ( 0% ( transform: rotate(0deg); ) 3% ( transform: rotate(1deg); ) 6% ( transform: rotate(2deg); ) 9% ( transform: rotate(3deg); ) 12% ( transform: rotate(2deg); ) 15% ( transform: rotate(1deg) ); ) 18% ( transform: rotate(0deg); ) 21% ( transform: rotate(-1deg); ) 24% ( transform: rotate(-2deg); ) 27% ( transform: rotate(-3deg); ) 30% ( transform: rotate(-2deg); ) 33% ( transform: rotate(-1deg); ) 36% ( transform: rotate(0deg); ) 100% ( transform: rotate(0deg); ) )
| 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 | |||
