CSS animation delay between iterations [duplicate]
This question already has an answer here:
CSS animation delay in repeating
7 answers
I have this kind of animation:
.wiggle-animation {
animation: 1s wiggle-animation ease infinite;
animation-delay: 10s;
}
@keyframes wiggle-animation {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #000;
}
20% {
transform: rotate(20deg);
}
40% {
transform: rotate(-15deg);
}
60% {
transform: rotate(5deg);
}
90% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
}
I want this animation to trigger every 10 seconds. I have tried animation-delay but it does not work. Can you tell me what am I doing wrong?
css animation rotation transform delay
asked Nov 13 '18 at 18:14
KoboldMinesKoboldMines
517
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 19:23
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
CSS animation delay in repeating
7 answers
I have this kind of animation:
.wiggle-animation {
animation: 1s wiggle-animation ease infinite;
animation-delay: 10s;
}
@keyframes wiggle-animation {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #000;
}
20% {
transform: rotate(20deg);
}
40% {
transform: rotate(-15deg);
}
60% {
transform: rotate(5deg);
}
90% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
}
I want this animation to trigger every 10 seconds. I have tried animation-delay but it does not work. Can you tell me what am I doing wrong?
css animation rotation transform delay
asked Nov 13 '18 at 18:14
KoboldMinesKoboldMines
517
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 19:23
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
@RogatnevNikita are you aware that you linked the same question?
– Temani Afif
Nov 13 '18 at 19:22
add a comment |
This question already has an answer here:
CSS animation delay in repeating
7 answers
I have this kind of animation:
.wiggle-animation {
animation: 1s wiggle-animation ease infinite;
animation-delay: 10s;
}
@keyframes wiggle-animation {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #000;
}
20% {
transform: rotate(20deg);
}
40% {
transform: rotate(-15deg);
}
60% {
transform: rotate(5deg);
}
90% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
}
I want this animation to trigger every 10 seconds. I have tried animation-delay but it does not work. Can you tell me what am I doing wrong?
css animation rotation transform delay
asked Nov 13 '18 at 18:14
KoboldMinesKoboldMines
517
This question already has an answer here:
CSS animation delay in repeating
7 answers
I have this kind of animation:
.wiggle-animation {
animation: 1s wiggle-animation ease infinite;
animation-delay: 10s;
}
@keyframes wiggle-animation {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #000;
}
20% {
transform: rotate(20deg);
}
40% {
transform: rotate(-15deg);
}
60% {
transform: rotate(5deg);
}
90% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
}
I want this animation to trigger every 10 seconds. I have tried animation-delay but it does not work. Can you tell me what am I doing wrong?
This question already has an answer here:
CSS animation delay in repeating
7 answers
css animation rotation transform delay
css animation rotation transform delay
asked Nov 13 '18 at 18:14
KoboldMinesKoboldMines
517
asked Nov 13 '18 at 18:14
KoboldMinesKoboldMines
517
asked Nov 13 '18 at 18:14
KoboldMinesKoboldMines
517
asked Nov 13 '18 at 18:14
KoboldMinesKoboldMines
517
asked Nov 13 '18 at 18:14
KoboldMinesKoboldMines
517
517
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 19:23
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 19:23
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
@RogatnevNikita are you aware that you linked the same question?
– Temani Afif
Nov 13 '18 at 19:22
add a comment |
@RogatnevNikita are you aware that you linked the same question?
– Temani Afif
Nov 13 '18 at 19:22
@RogatnevNikita are you aware that you linked the same question?
– Temani Afif
Nov 13 '18 at 19:22
@RogatnevNikita are you aware that you linked the same question?
– Temani Afif
Nov 13 '18 at 19:22
add a comment |
2 Answers
2
active
oldest
votes
There is no construct in CSS that handles this, you sort of have to fake it. Remove the delay, set your animation's duration to 11s, then adjust your keyframe percentages so that nothing happens for the final 90.9% of your animation, dividing up your remaining 9.1% of the time for the steps of your animation. (The animation-delay property only sets an initial delay.)
source for this technique
answered Nov 13 '18 at 18:32
RwwLRwwL
2,58911317
add a comment |
animation-delay delays the start of the animation.
Your best bet is to 'do the math' and set the total duration of your animation to 10 seconds, and have the animation remain still for the remaining 9 seconds:
.wiggle-animation {
animation: 10s wiggle-animation ease infinite;
}
@keyframes wiggle-animation {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #000;
}
2% {
transform: rotate(20deg);
}
4% {
transform: rotate(-15deg);
}
6% {
transform: rotate(5deg);
}
9% {
transform: rotate(-1deg);
}
10% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
100% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
}
answered Nov 13 '18 at 18:34
Glen CarpenterGlen Carpenter
784
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
There is no construct in CSS that handles this, you sort of have to fake it. Remove the delay, set your animation's duration to 11s, then adjust your keyframe percentages so that nothing happens for the final 90.9% of your animation, dividing up your remaining 9.1% of the time for the steps of your animation. (The animation-delay property only sets an initial delay.)
source for this technique
answered Nov 13 '18 at 18:32
RwwLRwwL
2,58911317
add a comment |
There is no construct in CSS that handles this, you sort of have to fake it. Remove the delay, set your animation's duration to 11s, then adjust your keyframe percentages so that nothing happens for the final 90.9% of your animation, dividing up your remaining 9.1% of the time for the steps of your animation. (The animation-delay property only sets an initial delay.)
source for this technique
answered Nov 13 '18 at 18:32
RwwLRwwL
2,58911317
add a comment |
There is no construct in CSS that handles this, you sort of have to fake it. Remove the delay, set your animation's duration to 11s, then adjust your keyframe percentages so that nothing happens for the final 90.9% of your animation, dividing up your remaining 9.1% of the time for the steps of your animation. (The animation-delay property only sets an initial delay.)
source for this technique
answered Nov 13 '18 at 18:32
RwwLRwwL
2,58911317
There is no construct in CSS that handles this, you sort of have to fake it. Remove the delay, set your animation's duration to 11s, then adjust your keyframe percentages so that nothing happens for the final 90.9% of your animation, dividing up your remaining 9.1% of the time for the steps of your animation. (The animation-delay property only sets an initial delay.)
source for this technique
answered Nov 13 '18 at 18:32
RwwLRwwL
2,58911317
answered Nov 13 '18 at 18:32
RwwLRwwL
2,58911317
answered Nov 13 '18 at 18:32
RwwLRwwL
2,58911317
answered Nov 13 '18 at 18:32
RwwLRwwL
2,58911317
2,58911317
add a comment |
add a comment |
animation-delay delays the start of the animation.
Your best bet is to 'do the math' and set the total duration of your animation to 10 seconds, and have the animation remain still for the remaining 9 seconds:
.wiggle-animation {
animation: 10s wiggle-animation ease infinite;
}
@keyframes wiggle-animation {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #000;
}
2% {
transform: rotate(20deg);
}
4% {
transform: rotate(-15deg);
}
6% {
transform: rotate(5deg);
}
9% {
transform: rotate(-1deg);
}
10% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
100% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
}
answered Nov 13 '18 at 18:34
Glen CarpenterGlen Carpenter
784
add a comment |
animation-delay delays the start of the animation.
Your best bet is to 'do the math' and set the total duration of your animation to 10 seconds, and have the animation remain still for the remaining 9 seconds:
.wiggle-animation {
animation: 10s wiggle-animation ease infinite;
}
@keyframes wiggle-animation {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #000;
}
2% {
transform: rotate(20deg);
}
4% {
transform: rotate(-15deg);
}
6% {
transform: rotate(5deg);
}
9% {
transform: rotate(-1deg);
}
10% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
100% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
}
answered Nov 13 '18 at 18:34
Glen CarpenterGlen Carpenter
784
add a comment |
animation-delay delays the start of the animation.
Your best bet is to 'do the math' and set the total duration of your animation to 10 seconds, and have the animation remain still for the remaining 9 seconds:
.wiggle-animation {
animation: 10s wiggle-animation ease infinite;
}
@keyframes wiggle-animation {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #000;
}
2% {
transform: rotate(20deg);
}
4% {
transform: rotate(-15deg);
}
6% {
transform: rotate(5deg);
}
9% {
transform: rotate(-1deg);
}
10% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
100% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
}
answered Nov 13 '18 at 18:34
Glen CarpenterGlen Carpenter
784
animation-delay delays the start of the animation.
Your best bet is to 'do the math' and set the total duration of your animation to 10 seconds, and have the animation remain still for the remaining 9 seconds:
.wiggle-animation {
animation: 10s wiggle-animation ease infinite;
}
@keyframes wiggle-animation {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #000;
}
2% {
transform: rotate(20deg);
}
4% {
transform: rotate(-15deg);
}
6% {
transform: rotate(5deg);
}
9% {
transform: rotate(-1deg);
}
10% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
100% {
transform: rotate(0);
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
}
answered Nov 13 '18 at 18:34
Glen CarpenterGlen Carpenter
784
edited Nov 13 '18 at 19:50
answered Nov 13 '18 at 18:34
Glen CarpenterGlen Carpenter
784
answered Nov 13 '18 at 18:34
Glen CarpenterGlen Carpenter
784
answered Nov 13 '18 at 18:34
Glen CarpenterGlen Carpenter
784
784
add a comment |
add a comment |
@RogatnevNikita are you aware that you linked the same question?
– Temani Afif
Nov 13 '18 at 19:22