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

У меня есть 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

html css css-animations

15.09.2018 17:46

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

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

15.09.2018 17:54

Как это?

В .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, и, похоже, он работал так, как вы описали.

15.09.2018 18:12

Ответ принят как подходящий

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

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

15.09.2018 23:41

Другие вопросы по теме

Как поднять одну карту в группе карт css

Как отключить максимальную ширину веб-представления Evernote с помощью JavaScript?

Получить стиль элемента HTML в модульном тесте реакции энзима

Селектор first-child и first-of-type не работает

Заполнение div нарушается макетом столбца

Почему пользовательский класс css не работает с элементами React-Semantic-UI?

Dygraph не загружает локальный файл css

Сортировка стиля CSS в angular

Как применить другой цветовой эффект при наведении курсора к разным li с помощью CSS

Сделайте изображение подходящим с помощью div без потери содержимого в CSS

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

Ответы 3

Другие вопросы по теме

Похожие вопросы