如何在CSS中设置动画定时？[关闭]

Question

有没有设置自定义动画定时的功能或战术？我正在尝试创建一个自定义定时警察flash动画，但我有一些问题。例如，我有两种颜色。红色和蓝色。我想让蓝色闪烁1秒，停止闪烁，红色开始闪烁，当红色停止闪烁，蓝色开始闪烁。

Answer 1

使用2秒的动画。蓝光将在第一秒（0-50%动画时间）闪烁，红光将从50-100%动画时间闪烁。

要做到这一点，请使用关键帧，如下例所示。

若要使动画从start开始继续，请使用infinite语法；

null

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  background-color: black;
}

div {
  height: 50px;
  width: 100px;
}

.blue {
  animation: 2s infinite flashblue;
}

.red {
  animation: 2s infinite flashred;
}

@keyframes flashblue {
  0% {
    background-color: lightblue;
  }
  25% {
    background-color: darkblue;
  }
  50% {
    background-color: lightblue;
  }
  100% {
    background-color: lightblue;
  }
}

@keyframes flashred {
  0% {
    background-color: salmon;
  }
  50% {
    background-color: salmon;
  }
  75% {
    background-color: firebrick;
  }
  100% {
    background-color: salmon;
  }
}

html prettyprint-override"><div class="blue"></div>
<div class="red"></div>

Answer 2

我想这能帮到你。

null

.blue {
  animation: bluePoint 2s infinite;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: blue;
}
.red {
  animation: redPoint 2s infinite;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}
@keyframes bluePoint {
  0% {opacity: 1}
  12.5% {opacity: .5}
  25% {opacity: 1}
  37.5% {opacity: .5}
  50% {opacity: 1}
  100% {opacity: 1}
}
@keyframes redPoint {
  0% {opacity: 1}
  50% {opacity: 1}
  62.5% {opacity: .5}
  75% {opacity: 1}
  87.5% {opacity: .5}
  100% {opacity: 1}
}

html lang-html prettyprint-override"><div class="blue"></div>
<div class="red"></div>