CSS animation doesn't restart when resetting class
I think I figured it out. According to this, css animation can't get applied to the same node twice (even if you have a different animation!). So I had to clone the node, remove the original, and add back the cloned node.
Restart animation in CSS3: any better way than removing the element?
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.
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).
How to prevent css3 animation reset when finished?
Add animation-fill-mode: forwards;
to your .go
The animation’s final keyframe continues to apply after the final iteration of the animation completes.
http://css-infos.net/property/-webkit-animation-fill-mode
Restart CSS3 animation using Javascript
You could check for the end of the animation by responding to the endanimation event (of which there are several browser-dependent variants), reloading the relevant nodes, and repeating the whole process. Note I applied a factor 10 to the speed of the animations so you can see the effect faster:
// Define a function that listens to all prefix variants of endanimation events:
function whenAnimationEnd(element, callback) {
element.addEventListener('animationend', callback, false);
element.addEventListener('webkitAnimationEnd', callback, false);
element.addEventListener('oanimationend', callback, false);
element.addEventListener('MSAnimationEnd', callback, false);
}
(function repeat() {
whenAnimationEnd(document.querySelector('.click_through2'), function(e) {
var container = document.querySelector('.ad_container');
var dupe = container.cloneNode(true);
container.parentNode.replaceChild(dupe, container);
repeat();
});
}()); .ad_container {
height: 250px;
position: relative;
width: 300px;
overflow: hidden;
}
.ad_container div, .ad_container a, .logo, .sfv2 {
position: absolute;
}
.title {
bottom: 45px;
left: 5px;
right: 5px;
}
.title h2 {
color: #fff;
font-family: Helvetica,arial,sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1;
margin: 0;
text-align: center;
}
.click_through {
background-color: #fff200;
border-radius: 5px;
bottom: 12px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
color: #ce1e25;
font-family: Helvetica,arial,sans-serif;
font-size: 14px;
font-weight: 700;
left: 0;
line-height: 1;
margin: 0 auto;
padding: 5px;
right: 0;
text-align: center;
width: 70px;
text-decoration: none;
}
.click_through1 {
animation: tbio 0.7s ease-out 0s both;
-moz-animation: tbio 0.7s ease-out 0s both;
-webkit-animation: tbio 0.7s ease-out 0s both;
-ms-animation: tbio 0.7s ease-out 0s both;
-o-animation: tbio 0.7s ease-out 0s both;
}
.click_through2 {
animation: tbio 0.7s ease-out 1s both;
-moz-tbio tbio 0.7s ease-out 1s both;
-webkit-tbio tbio 0.7s ease-out 1s both;
-ms-tbio tbio 0.7s ease-out 1s both;
-o-tbio tbio 0.7s ease-out 1s both;
width: 80px;
}
.logo {
top: 8px;
left: 8px;
}
.title1 {
animation: ltrio 0.6s ease 0s both;
-moz-animation: ltrio 0.6s ease 0s both;
-webkit-animation: ltrio 0.6s ease 0s both;
-ms-animation: ltrio 0.6s ease 0s both;
-o-animation: ltrio 0.6s ease 0s both;
}
.title2, .title3 {
opacity: 0;
}
.title2 {
animation: ltrio 0.6s ease 0.55s both;
-moz-animation: ltrio 0.6s ease 0.55s both;
-webkit-animation: ltrio 0.6s ease 0.55s both;
-ms-animation: ltrio 0.6s ease 0.55s both;
-o-animation: ltrio 0.6s ease 0.55s both;
}
.title3 {
animation: ltrio 0.6s ease 1s both;
-moz-nimation: ltrio 0.6s ease 1s both;
-webkit-nimation: ltrio 0.6s ease 1s both;
-ms-onimation: ltrio 0.6s ease 1s both;
-o-nimation: ltrio 0.6s ease 1s both;
}
.sfv2 {
right: 12px;
top: 34px;
animation: fio 0.6s ease 1.1s both;
-moz-animation: fio 0.6s ease 1.1s both;
-webkit-animation: fio 0.6s ease 1.1s both;
-ms-animation: fio 0.6s ease 1.1s both;
-o-animation: fio 0.6s ease 1.1s both;
}
@keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes ltrio {
0% {
-ms-transform: translateY(-350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
@-o-keyframes ltrio {
0% {
-o-transform: translateX(-350px);
opacity: 0;
}
25% {
-o-transform: translateX(0);
opacity: 1;
}
75% {
-o-transform: translateX(0);
opacity: 1;
}
100% {
-o-transform: translateX(350px);
opacity: 0;
}
}
@keyframes tbio {
0% {
transform: translateY(350px);
opacity: 0;
}
25% {
transform: translateY(0);
opacity: 1;
}
75% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(350px);
opacity: 0;
}
}
@-moz-keyframes tbio {
0% {
-moz-transform: translateY(350px);
opacity: 0;
}
25% {
-moz-transform: translateY(0);
opacity: 1;
}
75% {
-moz-transform: translateY(0);
opacity: 1;
}
100% {
-moz-transform: translateY(350px);
opacity: 0;
}
}
@-webkit-keyframes tbio {
0% {
-webkit-transform: translateY(350px);
opacity: 0;
}
25% {
-webkit-transform: translateY(0);
opacity: 1;
}
75% {
-webkit-transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(350px);
opacity: 0;
}
}
@-ms-keyframes tbio {
0% {
-ms-transform: translateY(350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
@-o-keyframes tbio {
0% {
-o-transform: translateY(350px);
opacity: 0;
}
25% {
-o-transform: translateY(0);
opacity: 1;
}
75% {
-o-transform: translateY(0);
opacity: 1;
}
100% {
-o-transform: translateY(350px);
opacity: 0;
}
}
@keyframes fio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}<div class="ad_container">
<img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg">
<div class="title title1">
<h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at £65k</h2>
</div>
<div class="title title2">
<h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2>
</div>
<div class="title title3">
<h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2>
</div>
<a class="click_through click_through1" href="/">View here</a>
<a class="click_through click_through2" href="/">Learn more</a>
</div>Resetting an animation when it is triggered again in React (using hooks) - Sliding Text
It seems like bad practice - but this setTimeout(() => {....}, 0) solves the issue:
useEffect(() => {
let mainPixelWidth = containerTagRef.current.clientWidth;
setTimeout(() => {
artistNamesTag.current.clientWidth > mainPixelWidth - 16
? setIsOverflowingNames(true)
: setIsOverflowingNames(false);
songTitleTag.current.clientWidth > mainPixelWidth - 16
? setIsOverflowingTitle(true)
: setIsOverflowingTitle(false);
}, 0);
return () => {
setIsOverflowingNames(false); // reset this animation
setIsOverflowingTitle(false); // reset this animation
};
}, [playerSource]);
How can I reset and repeat a CSS animation?
You don't need Javascript to achieve this as CSS allows you to have several animations on one element.
As you want only two iterations of each animation we can put two on each of the animated elements, changing the wait time of the second one by adding the 17seconds that the first set of animations overall takes.
A couple of extra adjustments had to be made, on the first and last word animations to make sure they were shown correctly in the second set of animations. The fourth word is made to go to opacity 0 at the end of its animation so it doesn't show the second time round to begin with and its animation duration was increased accordingly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body,
#banner {
width: 320px;
height: 320px;
border: 1px solid black;
position: relative;
color: #fff;
overflow: hidden;
}
#banner {
background: #000;
display: flex;
flex-direction: row;
--t: 17s;
/* overall time for one complete animation */
--i: 2;
/* number of iterations of the complete animation */
}
#frame-1,
#frame-2 {
padding: 30px;
font-size: 50px;
width: 100%;
height: 100%;
position: absolute;
}
#frame-1,
#frame-2 {
transform: translateX(150%);
}
.words {
font-family: sans-serif;
font-size: 20px;
line-height: 22px;
height: 22px;
}
.wordlist {
position: relative;
overflow: hidden;
flex-grow: 1;
padding-left: 8px;
}
.word {
position: absolute;
display: block;
transform: translateY(50px);
}
.subheading__container {
display: flex;
flex-direction: row;
}
.first {
animation: 2s ease-out 0.75s forwards slide-out, 2s ease-out calc(17s + 0.75s) forwards slide-out;
}
.second {
animation: 2.5s ease-out 1.5s forwards slide-in-out, 2.5s ease-out calc(17s + 1.5s) forwards slide-in-out;
}
.third {
animation: 2.5s ease-out 3.15s forwards slide-in-out, 2.5s ease-out calc(17s + 3.15s) forwards slide-in-out;
}
.fourth {
animation: 4s ease-out 4.75s forwards slide-in, 4s ease-out calc(17s + 4.75s) forwards slide-in;
}
.slide-in-animation-1 {
animation: 8s ease-in 1s forwards start-animation, 8s ease-in calc(17s + 1s) forwards start-animation;
}
.slide-in-animation-2 {
animation: 8s ease-in 9s forwards start-animation, 8s ease-in calc(17s + 9s) forwards start-animation-and-remain;
}
@keyframes start-animation {
0% {
transform: translateX(150%);
display: block;
}
4% {
transform: translateX(0%);
}
50% {
transform: translateX(0%);
}
96% {
transform: translateX(0%);
}
100% {
transform: translateX(-150%);
display: none;
}
}
@keyframes start-animation-and-remain {
0% {
transform: translateX(150%);
display: block;
}
4% {
transform: translateX(0%);
}
50%,
100% {
transform: translateX(0%);
}
}
@keyframes start-animation-and-remain {
0% {
transform: translateX(150%);
display: block;
}
4% {
transform: translateX(0%);
}
50%,
100% {
transform: translateX(0%);
}
}
@keyframes slide-out {
0%,
50% {
transform: translateY(0);
}
100% {
transform: translateY(-50px);
}
}
@keyframes slide-in-out {
0% {
transform: translateY(50px);
}
25%,
75% {
transform: translateY(0px);
}
100% {
transform: translateY(-50px);
}
}
@keyframes slide-in {
0% {
transform: translateY(50px);
opacity: 1;
}
15%,
99.99% {
transform: translateY(0px);
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(0px);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="banner">
<div id="frame-1" class="slide-in-animation-1">
<div class="frame-1__container">
<p class="text">This is</p>
<p class="text">heading</p>
<div class="subheading__container">
<p class="subheading words">This is</p>
<p class="words wordlist">
<span class="word first">the first word</span>
<span class="word second">the second word</span>
<span class="word third">third word</span>
<span class="word fourth">fourth word</span>
</p>
</div>
</div>
</div>
<div id="frame-2" class="slide-in-animation-2">
<div class="frame-2__container">
<p class="text">Lorem</p>
<p class="text">Ipsum</p>
<p class="text">Dolor</p>
</div>
</div>
</div>
</body>
</html>Related Topics
Convert Dropdown to Selection Boxes with Color and Trigger Drop Down Action
Unable to Scroll in Scrollview
Mobile Safari on iOS Crashes on Big Pages
Add CSS Rule via Jquery for Future Created Elements
Disable Underline for Lowercase Characters: G Q P J Y
"Force Reflow" in CSS Transitions in Bootstrap
Full Height of a HTML Element (Div) Including Border, Padding and Margin
Event Listener on a CSS Pseudo-Element, Such as ::After and ::Before
CSS Animation Doesn't Restart When Resetting Class
Angularjs CSS Animation + Done Callback
How to Programmatically Add Js and CSS Resources to <H:Head>
Divide Semi Circle with Stroke-Dasharray and on Active Color Fill
Can't Change Border Color of Material-Ui Outlinedinput
Combination of Animation and Transition Not Working Properly
Why Is Element Not Being Shown Before Alert
Get Week of Year in JavaScript Like in PHP
Surprised That Global Variable Has Undefined Value in JavaScript