Question

我四处张望，试图准确地找到我要在这里解释的内容，看看是否有人问过同样的问题，但是我不确定我的措辞是否正确。

我要尝试的是三个动画，以协调时间。我具有过渡背景，标题淡入和动画形状。我正在尝试让它们按顺序运行，但不确定如何去做。我手边没有代码，所以仅举个例子将是惊人的。让您大致了解我在寻找circlek.com的标题/横幅。

Answer 1

下面是3个连续动画的示例。

animation: fadeInText 1s 2s ease-in forwards;表示动画开始前有2秒钟的延迟，完成动画需要1秒钟。

希望这会有所帮助。更多详细信息here

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

协调CSS动画的时间安排

1 个答案: