Restart animation in CSS3: any better way than removing the element?
Restart animation in CSS3: any better way than removing the element?
I have a CSS3 animation that needs to be restarted on a click. It's a bar showing how much time is left. I'm using the scaleY(0) transform to create the effect.
Now I need to restart the animation by restoring the bar to scaleY(1) and let it go to scaleY(0) again.
My first attempt to set scaleY(1) failed because it takes the same 15 seconds to bring it back to full length. Even if I change the duration to 0.1 second, I would need to delay or chain the assignment of scaleY(0) to let the bar replenishment complete.
It feels too complicated for such a simple task.
I also found an interesting tip to restart the animation by removing the element from the document, and then re-inserting a clone of it:
http://css-tricks.com/restart-css-animation/
It works, but is there a better way to restart a CSS animation?
I'm using Prototype and Move.js, but I'm not restricted to them.
You can read in the updated blog post an other technique forcing to reflow the element:
element.offsetWidth = element.offsetWidth;– mems
Oct 29 '13 at 17:11
element.offsetWidth = element.offsetWidth;
6 Answers
6
Just set the animation property via JavaScript to "none" and then set a timeout that changes the property to "", so it inherits from the CSS again.
animation
"none"
""
Demo for Webkit here: http://jsfiddle.net/leaverou/xK6sa/
However, keep in mind that in real world usage, you should also include -moz- (at least).
Thanks Lea. Almost there :), If I change your animation to run only once I don't quite get the same effect. When I click, the animation doesn't start over again.
– Leo
Jun 11 '11 at 11:09
Does for me... jsfiddle.net/leaverou/xK6sa/2
– Lea Verou
Jun 11 '11 at 14:17
Thanks Lea, I this this works better than replacing the elements
– Leo
Jun 16 '11 at 3:19
Thank you!:) You have saved my life. This was the only one solution that worked for me!
– viery365
Nov 30 '16 at 1:39
Thanks a lot! - But unfortunately i cannot get it to work in Safari. Chrome, Edge and Firefox are working as expected. i use following code:
var anim = jQuery(mutation.target).find(".background.background-image:first").get(0); anim.style.WebkitAnimation = 'none'; anim.style.animation = 'none'; setTimeout(function() anim.style.WebkitAnimation = ''; anim.style.animation = ''; , 10); }– dheil
Feb 24 '17 at 14:45
var anim = jQuery(mutation.target).find(".background.background-image:first").get(0); anim.style.WebkitAnimation = 'none'; anim.style.animation = 'none'; setTimeout(function() anim.style.WebkitAnimation = ''; anim.style.animation = ''; , 10); }
No need in timeout, use reflow to apply the change:
function reset_animation()
var el = document.getElementById('animated');
el.style.animation = 'none';
el.offsetHeight; /* trigger reflow */
el.style.animation = null;
#animated
position: absolute;
width: 50px; height: 50px;
background-color: black;
animation: bounce 3s ease-in-out infinite;
@keyframes bounce
0% left: 0;
50% left: calc( 100% - 50px );
100% left: 0;
<div id="animated"></div>
<button onclick="reset_animation()">Reset</button>
You can also trigger reflow by calling any of these properties/method, not just
offsetHeight.– Fahmi
Jan 19 at 9:08
offsetHeight
reflow is better than the selected anwser
– Eric
Apr 2 at 13:27
doesn't triggering a reflow have a performance hit? how does this compare to the selected answer, performance-wise?
– eiko
Jul 24 at 16:03
If you have some class for css3 animation, for exapmle .blink then you can removeClass for some element and addClass for this element thought setTimeout with 1 milisecond by click.
$("#element").click(function()
$(this).removeClass("blink");
setTimeout(function()
$(this).addClass("blink);
,1 ///it may be only 1 milisecond, it's enough
);
animationend
---HTML---
<div id="animatedText">
Animation happens here
</div>
<script>
function startanimation(element)
element.classList.add("animateDescriptor");
element.addEventListener( "animationend", function()
element.classList.remove("animateDescriptor");
);
</script>
<button onclick="startanimation( document.getElementById('animatedText') )">
Click to animate above text
</button>
---CSS---
@keyframes fadeinout
from color: #000000;
25% color: #0000FF;
50% color: #00FF00;
75% color: #FF0000;
to color : #000000;
.animateDescriptor
animation: fadeinout 1.0s;
Try it here:
https://jsfiddle.net/bigjosh/avp9Lk6r/50/
on this page you can read about restart the element animation: https://css-tricks.com/restart-css-animation/
here is my example:
<head>
<style>
@keyframes selectss
0%opacity: 0.7;transform:scale(1);
100%transform:scale(2);opacity: 0;
</style>
<script>
function animation()
var elm = document.getElementById('circle');
elm.style.animation='selectss 2s ease-out';
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
</script>
</head>
<body>
<div id="circle" style="height: 280px;width: 280px;opacity: 0;background-color: aqua;border-radius: 500px;"></div>
<button onclick="animation()"></button>
</body>
but if you want to you can just remove the element animation and then return it:
function animation()
var elm = document.getElementById('circle');
elm.style.animation='';
setTimeout(function () elm.style.animation='selectss 2s ease-out';,10)
hope i helped!
Create a second "keyframe@" which restarts you animation, only problem with this you cannot set any animation properties for the restarting animation (it just kinda pops back)
----- HTML -----
<div class="slide">
Some text..............
<div id="slide-anim"></div>
</div><br>
<button onclick="slider()"> Animation </button>
<button id="anim-restart"> Restart Animation </button>
<script>
var animElement = document.getElementById('slide-anim');
document.getElementById('anim-restart').addEventListener("mouseup", restart_slider);
function slider()
animElement.style.animationName = "slider"; // other animation properties are specified in CSS
function restart_slider()
animElement.style.animation = "slider-restart";
</script>
----- CSS -----
.slide
position: relative;
border: 3px black inset;
padding: 3px;
width: auto;
overflow: hidden;
.slide div:first-child
position: absolute;
width: 100%;
height: 100%;
background: url(wood.jpg) repeat-x;
left: 0%;
top: 0%;
animation-duration: 2s;
animation-delay: 250ms;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.33,.99,1,1);
@keyframes slider
to left: 100%;
@keyframes slider-restart
to left: 0%;
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
possible duplicate of How do I re-trigger a WebKit CSS animation via JavaScript?
– Bergi
Jun 25 '13 at 17:30