добавить 2 CSS анимации к одному элементу - PullRequest
Новая
       7

добавить 2 CSS анимации к одному элементу

0 голосов
/ 15 сентября 2018

У меня есть 2 элемента: один прямоугольный, а другой линейный. Я перемещаю rect слева направо, как только это будет сделано, затем я поворачиваю line. Тогда я хочу, чтобы после поворота линии я хотел изменить цвет фона на 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);
  }
}
<div class="rect"></div>
<div class="line"></div>

JSFiddle

Ответы [ 3 ]

0 голосов
/ 15 сентября 2018

Как это?

В .rect добавьте вторую анимацию: 

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

Затем определите новую анимацию: 

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

Я проверял это на вашемJSFiddle, и, кажется, это работает, как вы описали.

0 голосов
/ 16 сентября 2018

Вам не нужны дополнительные animation, вам просто нужно настроить ключевой кадр % и изменить длительность на 2.3s, что составляет 1s+ 1.3s, если вы хотите, чтобы изменение color происходило одновременно в конце, если нет, то отрегулируйте % соответственно: 

.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)}
}
<div class="rect"></div>
<div class="line"></div>
0 голосов
/ 15 сентября 2018

Вы можете несколько анимаций, разделенных запятой.Просто добавьте задержку анимации ко второй анимации, которая меняет цвет 

.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>
...