CSS Infinite Animation After Hidden Is Not Reset (Chrome)

Why wont animation reset and play again after class is added dynamically to the element for the second time

The animation property value actually never changes, with all the classes it's always the same and there is no point in time where it's unset, so it won't fire again.

You need to force the CSS engine sees that it did change. For this you can remove the class altogether force what is called a "reflow", which is when the CSS engine recalculates all the element's boxes in the page, and then only, set the class back:

function changit(color) {
const elem = document.getElementById('cont');
elem.classList = "";
elem.offsetWidth; // force reflow
elem.classList = color;
}

function changit(color) {
const elem = document.getElementById('cont');
elem.classList = "";
elem.offsetWidth; // force reflow
elem.classList = color;
}
@keyframes appear {
0% {opacity:0;}
100% {opacity:1;}
}

#cont {
position: relative;
width: 100px;
height: 100px;
display: block;
}

#cont::before {
width: 93%;
height: 100%;
position: sticky;
content: "";
display: block;
}

.red::before, .blue::before, .black::before { transition: opacity 2s ease;animation:appear 2s; }

.red::before {
background: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg) no-repeat;
}

.blue::before {
background: url(https://www.gravatar.com/avatar/24780fb6df85a943c7aea0402c843737?s=64&d=identicon&r=PG) no-repeat;
}

.black::before {
background:url(https://cdn.sstatic.net/Sites/stackoverflow/Img/subcommunities/intel.svg?v=0371bf2f3b96) no-repeat;
}
<div id="cont">

</div>
<button onclick="changit('red');">make red</button>
<button onclick="changit('blue');">make blue</button>
<button onclick="changit('black');">make black</button>

How to work around animated element rendered as a black square (Chrome bug)?

Another solution is to consider pseudo element to create both sides and you won't have the bug and you can easily manage each side alone.

.spinning {  animation-name: spinning;  animation-duration: 2s;  animation-iteration-count: infinite;  animation-timing-function: linear;  width: 100px;  height: 100px;  position: relative;  transform-style:preserve-3d;}.spinning:before,.spinning:after {  content: "";  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  backface-visibility: hidden;}.spinning:before {  background-image: radial-gradient(farthest-corner at 40% 40%, #fff, #f7f7f7 50%, #e8e8e8 75%, #d1d1d1 100%);}.spinning:after {  transform: rotateY(180deg);  background:rgba(255,0,0,0.5);}
@keyframes spinning { 0% { transform: rotate3d(1, -1, 0, -180deg); } 100% { transform: rotate3d(1, -1, 0, 180deg); }}
<div class="spinning"></div>

Css Animation not working in Google Chrome

You need to include the prefixed keyframe rule for WebKit browsers as well.

@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}

CSS3 inifnite animation loop is not working in google chrome 31.0.1650.57

Looks like you've found a bug. I guess Chrome isn't so good at animating boolean values.

You can use opacity as a workaround:

@keyframes datetime-blinker {
0% { opacity: 0.0; }
49% { opacity: 0.0; }
50% { opacity: 1.0; }
100% { opacity: 1.0; }
}

http://jsfiddle.net/hYsG8/1/

CSS animation working differently in Chrome

This seems to be a bug in older versions of Chrome (seen till v38) which seems to have got fixed now (based on the comments to question). However, you need to make note of the following things:

  • The roll wheel animation has a duration of 1.5s and is supposed to start after a delay of 3.3s. The animation has 5 iterations and so this whole animation would effectively complete only after 10.8s from start (3.3s + (1.5s * 5)).
  • The fade-in animation has a duration of .1s and is supposed to start after a delay of 6s. Because of this animation, the element is supposed to have faded out of view at 6.1s mark. (But this is not happening due to some bug in older versions).
  • Now, if you look carefully, at 6.1s not even 2 iterations of the roll wheel animation would have got completed and hence the iteration count that is set doesn't really make much sense and it needs to be reduced but even if we reduce it to 2, the animation would end only at 6.3s. So, change the duration of roll wheel animation to 1.4s and set the iteration count to just 2. This should fix it.
  • In the below snippet, I have made the change only for -webkit-animation but this should work in all browsers. I had tested in Chrome, Firefox but please test it out before modifying the others.

Now coming to the bug itself, ideally, when more than one animation is modifying the same property then the one that is specified last should take priority. So, in this case the opacity change within the fade-in animation should have taken priority and faded out the wheels but it is not happening. So, the only solution we are left with is to modify the duration and iteration of roll wheel animation in order to make sure that it completes at the same time the fade-in completes.

As per W3C Spec

If at one point in time there are multiple animations specifying behavior for the same property, the animation which occurs last in the value of animation-name will override the other animations at that point.

body {  font-family: Helvetica, Arial, sans-serif;  margin: 0px;}#headline1,#headline2 {  background-image: url(http://i.share.pho.to/6846bb0a_o.png);  background-repeat: no-repeat;  width: 261px;  height: 25px;  position: absolute;  top: 20px;  left: 20px;}#headline1 {  -webkit-animation: fade-in .1s ease 6s 1 reverse forwards;  -moz-animation: fade-in .1s ease 6s 1 reverse forwards;  -o-animation: fade-in .1s ease 6s 1 reverse forwards;  animation: fade-in .1s ease 6s 1 reverse forwards;}#headline2 {  background-position: 0px -25px;  top: 40px;  -webkit-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;  -moz-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;  -o-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;  animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;}button {  background: #FFCB05;  height: 34px;  width: 130px;  border: none;  z-index: 999;  border-radius: 17px;  color: #000;  cursor: pointer;  font-family: Helvetica, Arial, sans-serif;  font-size: 14px;  outline: none;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  user-select: none;  -webkit-animation: fade-in 1s ease 7s 1 both;  -moz-animation: fade-in 1s ease 7s 1 both;  -o-animation: fade-in 1s ease 7s 1 both;  animation: fade-in 1s ease 7s 1 both;}button:hover,button:active {  background-color: #FFD716;}.sub-copy {  color: #FFF;  position: absolute;  margin-left: 25px;  top: 40px;  -webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;  -moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;  -o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;  animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;}#dis {  background-image: url(http://i.share.pho.to/4516683d_o.jpeg);  background-repeat: no-repeat;  width: 138px;  height: 19px;  position: absolute;  margin-left: 22px;  top: 206px;  -webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;  -moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;  -o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;  animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;}#logo {  background-image: url(http://i.share.pho.to/306d2b9c_o.png);  background-repeat: no-repeat;  width: 103px;  height: 26px;  position: absolute;  bottom: 20px;  right: 20px;}#tag-line {  background-image: url(http://i.share.pho.to/e62322ba_o.jpeg);  background-repeat: no-repeat;  width: 207px;  height: 40px;  position: absolute;  bottom: 153px;  left: 14px;  -webkit-animation: fade-in 1s ease 10.5s 1 both;  -moz-animation: fade-in 1s ease 10.5s 1 both;  -o-animation: fade-in 1s ease 10.5s 1 both;  animation: fade-in 1s ease 10.5s 1 both;}#girl-arm {  position: absolute;  top: 141px;  left: 133px;  width: 9px;  height: 5px;  z-index: 7;  opacity: 0;  background-image: url(http://i.share.pho.to/5a840ac3_o.gif);  background-repeat: no-repeat;  background-position: -37px -34px;  -webkit-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;  -moz-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;  -o-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;  animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;}#girl-1 {  position: absolute;  top: 107px;  left: 96px;  width: 84px;  height: 85px;  background-image: url(http://i.share.pho.to/5a840ac3_o.gif);  background-repeat: no-repeat;  -webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;  -moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;  -o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;  animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;}#clock-lamp {  position: absolute;  top: 104px;  left: 184px;  width: 24px;  height: 88px;  background-image: url(http://i.share.pho.to/d264b4e6_o.gif);  background-repeat: no-repeat;  -webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;  -moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;  -o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;  animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;}#clock2 {  position: absolute;  top: 74px;  left: 181px;  width: 29px;  height: 117px;  background-image: url(http://i.share.pho.to/24b90b3c_o.gif);  background-repeat: no-repeat;  -webkit-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;  -moz-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;  -o-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;  -ms-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;  animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;}#desk-car {  position: absolute;  top: 102px;  left: 33px;  width: 204px;  height: 90px;  z-index: 5;  background-image: url(http://i.share.pho.to/0c2e3ceb_o.png);  background-repeat: no-repeat;  -webkit-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;  -moz-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;  -o-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;  animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;}#window-l,#window-r {  position: absolute;  top: 79px;  width: 59px;  height: 69px;  background-image: url(http://i.share.pho.to/4bf00ac7_o.gif);  background-repeat: no-repeat;  -webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;  -moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;  -o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;  animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;}#window-l {  left: 18px;}#window-r {  left: 218px;}#wheel-l,#wheel-r {  position: absolute;  top: 157px;  width: 32px;  height: 33px;  opacity: 0;  z-index: 9;  background-image: url(http://i.share.pho.to/08185b2c_o.png);  background-repeat: no-repeat;  -webkit-animation: roll-wheel 1.4s linear 3.3s 2 none, fade-in .1s ease 6s 1 reverse forwards;  -moz-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;  -o-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;  animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;}#wheel-l {  left: 57px;}#wheel-r {  left: 184px;}#ad {  display: block;  border: rgb(145, 153, 153) 1px solid;  overflow: hidden;  cursor: pointer;  width: 298px;  height: 248px;  -moz-user-select: -moz-none;  -khtml-user-select: none;  -webkit-user-select: none;  -ms-user-select: none;  user-select: none;}#banner {  position: absolute;  display: block;  width: 300px;  height: 250px;  background-color: #000;  background-position: 0px 0px;  background-repeat: no-repeat;  overflow: hidden;}.buttons {  position: absolute;  z-index: 20;  top: 110px;  left: 20px;}/* ANIMATIONS */
/* WEBKIT */
@-webkit-keyframes frame-animation { 0% { background-position: 0 0; } 100% { background-position: 0 -4920px; }}@-webkit-keyframes frame-girl-1 { 0% { background-position: 0 0; } 100% { background-position: -364px 0; }}@-webkit-keyframes frame-girl-2 { 0% { background-position: 0 0; opacity: 1; } 100% { background-position: -364px 0; opacity: 1; }}@-webkit-keyframes frame-clock-lamp { 0% { background-position: 0 0; } 100% { background-position: -660px 0; }}@-webkit-keyframes move-left { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-250px); }}@-webkit-keyframes frame-desk-car { 0% { background-position: 0 0; } 100% { background-position: 0 -2418px; }}@-webkit-keyframes frame-window { 0% { background-position: 0 0; } 100% { background-position: -354px 0; }}@-webkit-keyframes roll-wheel { 0% { -webkit-transform: rotate(0deg); opacity: 1; } 100% { -webkit-transform: rotate(360deg); opacity: 1; }}@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }}@-webkit-keyframes mask-in { 0% { background-position: 0 -50px; opacity: 0; } 100% { background-position: 0 -25px; opacity: 1; }}@-webkit-keyframes rotate-arm { 0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 0% 0%; opacity: 1; } 100% { -webkit-transform: rotate(-10deg); -webkit-transform-origin: 0% 0%; opacity: 1; }}/* MOZ */
@-moz-keyframes frame-animation { 0% { background-position: 0 0; } 100% { background-position: 0 -4920px; }}@-moz-keyframes frame-girl-1 { 0% { background-position: 0 0; } 100% { background-position: -364px 0; }}@-moz-keyframes frame-girl-2 { 0% { background-position: 0 0; opacity: 1; } 100% { background-position: -364px 0; opacity: 1; }}@-moz-keyframes frame-clock-lamp { 0% { background-position: 0 0; } 100% { background-position: -660px 0; }}@-moz-keyframes move-left { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(-250px); }}@-moz-keyframes frame-desk-car { 0% { background-position: 0 0; } 100% { background-position: 0 -2418px; }}@-moz-keyframes frame-window { 0% { background-position: 0 0; } 100% { background-position: -354px 0; }}@-moz-keyframes roll-wheel { 0% { -moz-transform: rotate(0deg); opacity: 1; } 100% { -moz-transform: rotate(360deg); opacity: 1; }}@-moz-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }}@-moz-keyframes mask-in { 0% { background-position: 0 -50px; opacity: 0; } 100% { background-position: 0 -25px; opacity: 1; }}@-moz-keyframes rotate-arm { 0% { -moz-transform: rotate(0deg); -moz-transform-origin: 0% 0%; opacity: 1; } 100% { -moz-transform: rotate(-10deg); -moz-transform-origin: 0% 0%; opacity: 1; }}/* ms */
@-ms-keyframes frame-animation { 0% { background-position: 0 0; } 100% { background-position: 0 -4920px; }}@-ms-keyframes frame-girl-1 { 0% { background-position: 0 0; } 100% { background-position: -364px 0; }}@-ms-keyframes frame-girl-2 { 0% { background-position: 0 0; opacity: 1; } 100% { background-position: -364px 0; opacity: 1; }}@-ms-keyframes frame-clock-lamp { 0% { background-position: 0 0; } 100% { background-position: -660px 0; }}@-ms-keyframes move-left { from { -ms-transform: translateX(0); } to { -ms-transform: translateX(-250px); }}@-ms-keyframes frame-desk-car { 0% { background-position: 0 0; } 100% { background-position: 0 -2418px; }}@-ms-keyframes frame-window { 0% { background-position: 0 0; } 100% { background-position: -354px 0; }}@-ms-keyframes roll-wheel { 0% { -ms-transform: rotate(0deg); opacity: 1; } 100% { -ms-transform: rotate(360deg); opacity: 1; }}@-ms-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }}@-ms-keyframes mask-in { 0% { background-position: 0 -50px; opacity: 0; } 100% { background-position: 0 -25px; opacity: 1; }}@-ms-keyframes rotate-arm { 0% { -ms-transform: rotate(0deg); -ms-transform-origin: 0% 0%; opacity: 1; } 100% { -ms-transform: rotate(-10deg); -ms-transform-origin: 0% 0%; opacity: 1; }}/* O */
@-o-keyframes frame-animation { 0% { background-position: 0 0; } 100% { background-position: 0 -4920px; }}@-o-keyframes frame-girl-1 { 0% { background-position: 0 0; } 100% { background-position: -364px 0; }}@-o-keyframes frame-girl-2 { 0% { background-position: 0 0; opacity: 1; } 100% { background-position: -364px 0; opacity: 1; }}@-o-keyframes frame-clock-lamp { 0% { background-position: 0 0; } 100% { background-position: -660px 0; }}@-o-keyframes move-left { from { -o-transform: translateX(0); } to { -o-transform: translateX(-250px); }}@-o-keyframes frame-desk-car { 0% { background-position: 0 0; } 100% { background-position: 0 -2418px; }}@-o-keyframes frame-window { 0% { background-position: 0 0; } 100% { background-position: -354px 0; }}@-o-keyframes roll-wheel { 0% { -o-transform: rotate(0deg); opacity: 1; } 100% { -o-transform: rotate(360deg); opacity: 1; }}@-o-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }}@-o-keyframes mask-in { 0% { background-position: 0 -50px; opacity: 0; } 100% { background-position: 0 -25px; opacity: 1; }}@-o-keyframes rotate-arm { 0% { -o-transform: rotate(0deg); -o-transform-origin: 0% 0%; opacity: 1; } 100% { -o-transform: rotate(-10deg); -o-transform-origin: 0% 0%; opacity: 1; }}/* STANDARD */
@keyframes frame-animation { 0% { background-position: 0 0; } 100% { background-position: 0 -4920px; }}@keyframes frame-girl-1 { 0% { background-position: 0 0; } 100% { background-position: -364px 0; }}@keyframes frame-girl-2 { 0% { background-position: 0 0; opacity: 1; } 100% { background-position: -364px 0; opacity: 1; }}@keyframes frame-clock-lamp { 0% { background-position: 0 0; } 100% { background-position: -660px 0; }}@keyframes move-left { from { transform: translateX(0); } to { transform: translateX(-250px); }}@keyframes frame-desk-car { 0% { background-position: 0 0; } 100% { background-position: 0 -2418px; }}@keyframes frame-window { 0% { background-position: 0 0; } 100% { background-position: -354px 0; }}@keyframes roll-wheel { 0% { transform: rotate(0deg); opacity: 1; } 100% { transform: rotate(360deg); opacity: 1; }}@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }}@keyframes mask-in { 0% { background-position: 0 -50px; opacity: 0; } 100% { background-position: 0 -25px; opacity: 1; }}@keyframes rotate-arm { 0% { transform: rotate(0deg); transform-origin: 0% 0%; opacity: 1; } 100% { transform: rotate(-10deg); transform-origin: 0% 0%; opacity: 1; }}
<div id="ad">  <div id="banner">    <div id="headline1">    </div>    <div id="headline2">    </div>    <div id="tag-line">    </div>    <div id="wheel-l">    </div>    <div id="wheel-r">    </div>    <div id="desk-car">    </div>    <div id="girl-arm">    </div>    <div id="girl-1">    </div>    <div id="girl-2">    </div>    <br>    <div id="clock-lamp">    </div>    <div id="clock2">    </div>    <div id="window-l">    </div>    <div id="window-r">    </div>    <div class="sub-copy">To enter, open a CommSec International Account and      <br/>place a trade from <strong>US$19.95</strong>.    </div>    <div id="dis">    </div>    <div class="buttons">      <button id="clickthrough-button" class="button clickthrough">Find out more »      </button>    </div>    <div id="logo"></div>  </div></div>

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).



Related Topics



Leave a reply



Submit