Trouble chaining CSS animations

Question

I want to chain multiple animations together and I can't see what's wrong with my code (it only plays the second animation).

I know I could have made the goingup and goingdown animations just one animation (without chaining), but I want to insert a third animation in between these two animations and having three distinct animations seemed like the best approach.

.customer-1 {
 -webkit-animation: goingup 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s both;
         animation: goingup 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s both;

 -webkit-animation: goingdown 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.2s both;
         animation: goingdown 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.2s both;
}


@keyframes goingup {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes goingup {
  0% {
    -webkit-transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}


@keyframes goingdown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1000px);
    opacity: 0;
  }
}
@-webkit-keyframes goingdown {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
    opacity: 0;
  }
}

<div class="customer-1">

 div content

</div>

score 0 · Accepted Answer · answered Jun 14 '20 at 22:35

In CSS if you have:

.myElement {
  background-color: red;
  background-color: black; 
}

then only background-color: black; will be applied because it overwrites background-color: red;.

SOLUTION:

.customer-1 {
  animation: goingdown 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s forwards,
             goingup 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s forwards;  
}


@keyframes goingup {
  from {
    transform: translateY(200px);
  }
  to {
    transform: translateY(0px);
  }
}

@keyframes goingdown {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(200px);
  }
}

<div class="customer-1">
   div content
</div>

Explanation: The key here is to declare animation property only once and put all your keyframes inside it:

animation: goingdown 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s forwards,
             goingup 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s forwards;

goingdown keyframe will start at 1s and last for 1s, then goingup starts at 2s and it will last 1s.

Trouble chaining CSS animations

1 Answers1