CSS 动画时间、反转和一般流程

Question

我已经开始在这里创建基于 CSS 的动画了 -

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #999999 !important;
  height: 100vh;
  width: 100vw;
  font-size: 16px;
}

.loading-overlay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 900;
  background-color: #FFFFFF !important;
}
.loading-overlay.relative {
  position: relative !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
}
.loading-overlay .brand-logo-animation-loop {
  height: 12rem;
  width: 12rem;
  display: block;
  position: absolute;
  right: calc(50% - 6rem);
  top: calc(50% - 6rem);
}
.loading-overlay .brand-logo-animation-loop .shape1 {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6rem 0 6rem 6rem;
  border-color: transparent transparent transparent #FAE6FF;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: shape1;
          animation-name: shape1;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.loading-overlay .brand-logo-animation-loop .shape2 {
  position: absolute;
  left: 6rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6rem 6rem 6rem 0;
  border-color: transparent #FAE6FF transparent transparent;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: shape2;
          animation-name: shape2;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.loading-overlay .brand-logo-animation-loop .shape3 {
  width: 0;
  height: 0;
  opacity: 0;
  border-style: solid;
  border-width: 3rem 0 3rem 3rem;
  border-color: transparent transparent transparent #660296;
  position: absolute;
  z-index: 200;
  top: 3rem;
  left: 3rem;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: shape3;
          animation-name: shape3;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  transform-origin: top left;
}
.loading-overlay .brand-logo-animation-loop .shape3:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3rem 3rem 3rem 0;
  border-color: transparent #660296 transparent transparent;
  position: absolute;
  top: -3rem;
  right: 3rem;
}
.loading-overlay .brand-logo-animation-loop .shape3 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.loading-overlay .brand-logo-animation-loop .shape4 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3rem 0 3rem 3rem;
  border-color: transparent transparent transparent #8203C0;
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 6rem;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: shape4;
          animation-name: shape4;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  transform-origin: top left;
  opacity: 0;
}
.loading-overlay .brand-logo-animation-loop .shape4:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3rem 3rem 3rem 0;
  border-color: transparent #8203C0 transparent transparent;
  position: absolute;
  top: -3rem;
  right: 3rem;
}
.loading-overlay .brand-logo-animation-loop .shape4 {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.loading-overlay .brand-logo-animation-loop .shape5 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3rem 0 3rem 3rem;
  border-color: transparent transparent transparent #8203C0;
  position: absolute;
  bottom: 0;
  opacity: 0;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: shape5;
          animation-name: shape5;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.loading-overlay .brand-logo-animation-loop .shape5 {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}

@-webkit-keyframes master-turn {
  0% {
    transform: rotate(-45deg);
  }
  25% {
    transform: rotate(-45deg);
  }
  40% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes master-turn {
  0% {
    transform: rotate(-45deg);
  }
  25% {
    transform: rotate(-45deg);
  }
  40% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}
@-webkit-keyframes shape1 {
  0% {
    left: 3rem;
    opacity: 0;
  }
  20% {
    left: calc($smallSize - 1rem);
    opacity: 0.2;
  }
  80% {
    left: calc($smallSize - 2rem);
    opacity: 0.8;
  }
  100% {
    left: 0rem;
    opacity: 1;
  }
}
@keyframes shape1 {
  0% {
    left: 3rem;
    opacity: 0;
  }
  20% {
    left: calc($smallSize - 1rem);
    opacity: 0.2;
  }
  80% {
    left: calc($smallSize - 2rem);
    opacity: 0.8;
  }
  100% {
    left: 0rem;
    opacity: 1;
  }
}
@-webkit-keyframes shape2 {
  0% {
    left: -3rem;
    opacity: 0;
    transform: rotate(-180deg);
  }
  20% {
    left: 0rem;
    opacity: 0.2;
    transform: rotate(-90deg);
  }
  80% {
    left: 3rem;
    opacity: 0.8;
  }
  100% {
    left: 6rem;
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes shape2 {
  0% {
    left: -3rem;
    opacity: 0;
    transform: rotate(-180deg);
  }
  20% {
    left: 0rem;
    opacity: 0.2;
    transform: rotate(-90deg);
  }
  80% {
    left: 3rem;
    opacity: 0.8;
  }
  100% {
    left: 6rem;
    opacity: 1;
    transform: rotate(0deg);
  }
}
@-webkit-keyframes shape3 {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    pacity: 0.2;
    transform: scale(0.5);
  }
  80% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}
@keyframes shape3 {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    pacity: 0.2;
    transform: scale(0.5);
  }
  80% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes shape4 {
  0% {
    bottom: 3rem;
    left: 3rem;
    opacity: 0;
  }
  50% {
    bottom: 3rem;
    left: 3rem;
    opacity: 0.5;
  }
  100% {
    bottom: 0rem;
    left: 6rem;
    opacity: 1;
  }
}
@keyframes shape4 {
  0% {
    bottom: 3rem;
    left: 3rem;
    opacity: 0;
  }
  50% {
    bottom: 3rem;
    left: 3rem;
    opacity: 0.5;
  }
  100% {
    bottom: 0rem;
    left: 6rem;
    opacity: 1;
  }
}
@-webkit-keyframes shape5 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes shape5 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

<div class="loading-overlay">
    <div class="brand-logo-animation-loop">
        <div class="shape1"></div>
        <div class="shape2"></div>
        <div class="shape3"></div>
        <div class="shape4"></div>
        <div class="shape5"></div>
    </div>
</div>

Codepen：https://codepen.io/erswelljustin/pen/ExbKMaz

我对时间安排以及如何让它向前运行然后反向运行感到困惑。

解释：

形状 1 和形状 2 应该首先播放形状 2 从其容器左侧旋转，一旦完成，形状 3 动画应该运行，然后形状 4 和形状 5 之后，一旦全部完成，我需要反转这个过程，直到形状消失。

我希望整个动画无限运行，因为它应该是应用程序的加载动画。

我已经盯着这个看了好几天，无论我放置的延迟似乎都奇怪地毁了，请任何人帮助我。

注意：我想避免使用 JavaScript。

Answer 1

似乎animation-delay:6 根本无法与另一个持续 6 秒的动画的实际持续时间 100% 同步。尤其是当它不断循环时。

您可以尝试使所有动画的长度相同（例如 10 秒），并且仅使用关键帧百分比来决定动画何时开始或停止。比如这里 shape2 在 shape1 可见之后才可见。

.shape1 {
  width:100px;
  height:100px;
  background-color:green;
  animation: shape1 3s infinite linear;
}

.shape2 {
  width:100px;
  height:100px;
  background-color:blue;
  animation: shape2 3s infinite linear;
}


   @keyframes shape1 {
      0% {
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      40% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes shape2 {
      0% {
        opacity: 0;
      }
      20% {
        opacity: 0;
      }
      40% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }

<div class="shape1"></div>
<div class="shape2"></div>