CODEWITHSUNDEEP
csscss-animations
silvenon
silvenon

Reputation: 2197

Bugs with chaining CSS3 animations

I'm trying to chain CSS3 animations together, but they behave very weird sometimes. For example, in this pen, why won't the last animation start? I got it working before, but it doesn't anymore, and I used the same setup. The code I'm pasting here is a little bit simplified, but the animations are exactly the same:

HTML:

<div class="box"></div>

CSS:

body {
  padding: 60px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: black;

  animation-name: fadeIn, fall, elastic;
  animation-timing-function: ease, ease-in, ease-out;
  animation-duration: 1s, 0.5s, 0.5s;
  animation-delay: 0s, 0s, 0.5s;
  animation-fill-mode: forwards, forwards, forwards;
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fall {
  0%   { transform: translateY(-100px); }
  100% { transform: translateY(0px); }
}

@keyframes elastic {
  0%   { transform: translateY(0px); }
  20%  { transform: translateY(60px); }
  40%  { transform: translateY(-20px); }
  60%  { transform: translateY(10px); }
  80%  { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

Upvotes: 0

Views: 86

Answers (1)

kthornbloom
kthornbloom

Reputation: 3720

Maybe I'm wrong... but it seems that this does not "chain" them since they play simultaneously. If that's the case, then the last one probably isn't working because you're already keyframeing translateY in the second animation.

Upvotes: 2

Related Questions