add 2 css animation to one element

Question

I have 2 elements one is rect and another is line. I move rect from left to right once that is done then I rotate line. Then what I want is that once the line is rotated then I want to change the background color of rect.

.rect {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
  animation: move 1s;
  animation-fill-mode: forwards;
}

.line {
  position: absolute;
  top: 200px;
  left: 100px;
  height: 100px;
  border-right: 2px solid green;
  animation: rotate 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.3s;
}

@-webkit-keyframes move {
  to {
    left: 200px;
  }
}

@-webkit-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

JSFiddle

user_5246058 · Answer

you can multiple animation separated with comma. Just add animation delay to second animation which changes the color

.rect {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
  animation: move 1s, colorChange 1s 2s;
  animation-fill-mode: forwards;
}

.line {
  position: absolute;
  top: 200px;
  left: 100px;
  height: 100px;
  border-right: 2px solid green;
  animation: rotate 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.3s;
}

@-webkit-keyframes move {
  from {}
  to {
    left: 200px;
  }
}

@-webkit-keyframes rotate {
  from {}
  to {
    transform: rotate(360deg);
  }
}

@keyframes colorChange {
  to {
    background-color: green;
  }
}

user_6661052 · Answer

How's this?

In .rect, add a second animation:

.rect {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
  animation: move 1s, turnGreen 2.3s;
  animation-fill-mode: forwards;
}

Then define the new animation:

 @-webkit-keyframes turnGreen{
      0% {background: red;}
      99% {background: red;}
      100% {background: green;}
}

I tested this on your JSFiddle and it seemed to work as you described.

user_2851632 · Answer

You don't need an additional animation, you just need to adjust the keyframe % and change the duration to 2.3s, which is 1s + 1.3s, if you want the color change to happen simultaneously at the end, if not then adjust the % accordingly:

.rect {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  animation: move 2.3s forwards;
}

.line {
  position: absolute;
  top: 200px;
  left: 100px;
  height: 100px;
  border-right: 2px solid green;
  animation: rotate 1s 1.3s forwards;
}

@-webkit-keyframes move {
  43.48%, 100% {left: 200px} /* 100% / 2.3 = 43.48% (around), which is 1s duration (like before), then keep it there till the end (100%) */
  0%, 99.99% {background: red} /* keep it red 99.99% of the time */
  100% {background: blue} /* but not 100% */
}

@-webkit-keyframes rotate {
  to {transform: rotate(360deg)}
}

add 2 css animation to one element

3 Answers