Координировать время на CSS анимации - PullRequest
Новая
       17

Координировать время на CSS анимации

0 голосов
/ 31 августа 2018

Я оглянулся вокруг, пытаясь найти именно то, что я пытаюсь объяснить здесь, чтобы увидеть, если кто-то задал тот же вопрос, однако я не уверен, что моя формулировка верна.

У меня есть три анимации, которые я пытаюсь согласовать по времени. У меня есть переходный фон, исчезновение в заголовке и анимированная фигура. Я пытаюсь заставить их работать в последовательности, и я не уверен, как это сделать. У меня нет кода под рукой, поэтому просто примеры были бы удивительными. Чтобы дать вам представление о том, что я ищу заголовок / баннер circlek.com, в основном это.

1 Ответ

0 голосов
/ 31 августа 2018

Ниже приведен пример 3 последовательных анимаций.

animation: fadeInText 1s 2s ease-in forwards; означает, что до начала анимации задержка составляет 2 секунды, и для ее завершения требуется 1 секунда.

Надеюсь, это поможет. Подробнее здесь 

.wrapper {
  position: relative;
  width: 100%;
  height: 300px;
}

.anim1 {
  width: inherit;
  height: inherit;
  animation: backGroundColor 1s 1s ease-in forwards;
}

.anim2 {
  position: absolute;
  top: 30px;
  left: 100px;
  font-size: 3rem;
  color: white;
  opacity: 0;
  animation: fadeInText 1s 2s ease-in forwards;
}

.anim3 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 100px;
  left: 100px;
  animation: rotateSquare 1s 4s ease-in forwards;
}

@keyframes backGroundColor {
  0% {
    background-color: white;
  }
  100% {
    background-color: blue;
  }
}

@keyframes fadeInText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotateSquare {
  0% {
    transform: rotate(0deg);
    background-color: white;
  }
  100% {
    transform: rotate(45deg);
    background-color: red;
  }
}
<div class="wrapper">
  <div class="anim1"></div>
  <div class="anim2">Lorem Ipsum</div>
  <div class="anim3"></div>
</div>
...