CODEWITHSUNDEEP
cssgoogle-chromecss-animations
kcmr
kcmr

Reputation: 323

CSS animation doesn't start in Chrome if there is an animation-delay property

I'm trying to use two consecutive animations for an element using keyframes, but the second animation doesn't start in Chrome if I've set an animation-delay property until I make some interaction, like clicking somewhere. The code works as expected in Firefox.

Is this a bug or is there something that I'm doing wrong?

@-webkit-keyframes to-up {
  from {
    -webkit-transform: rotate(45deg);
  }
  to {
    -webkit-transform: rotate(0);
  }
}
@-webkit-keyframes move {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: translateY(-1000px);
  }
}

.animate {
  -webkit-animation-name: to-up, move;
  -webkit-animation-duration: .5s, 1s;
  -webkit-animation-delay: 0, 1.4s;
  -webkit-animation-timing-function: ease-in, cubic-bezier(0.6, -0.28, 0.735, 0.045);
  -webkit-animation-fill-mode: forwards;
}

Code on Codepen: http://codepen.io/kcmr/pen/Ibrnx

The animation-delay property is commented.

Upvotes: 1

Views: 3205

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25934

It turns out this is a bug reported nearly a year ago, which astounds me that it has not been fixed.

To fix it they said to change the second's animation-delay to the same length as the duration of the first. For you that would be

animation-delay: 0s, .5s;

They also discuss the possibility of running a second animation during that time (on a different element) which allows the second animation to run. I tested it and confirmed that it also fixes the issue, thus allowing you to have an animation-delay greater that .5s. Following is the animation (that does nothing) that I applied to the container, .wrapper

@keyframes empty {from{display:block;}to{display:block;}}

Good catch on the bug!

Upvotes: 3

Related Questions