add 2 css animation to one element

3947 views html
6

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. Below is my code

<div class="rect"></div>
<div class="line"></div>

CSS

.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 {
  from {
  }
  to {
    left: 200px;
  }
}

@-webkit-keyframes rotate {
  from {

  }
  to {
    transform: rotate(360deg);
  }
}

Here is JSFIDDLE

answered question

1 Answer

13

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;
  }
}
<div class="rect"></div>
<div class="line"></div>

posted this

Have an answer?

JD

Please login first before posting an answer.