如何在 CSS 中设置动画时间？ [关闭]答案

【问题标题】：How to set animation timing in CSS? [closed]如何在 CSS 中设置动画时间？ [关闭]
【发布时间】：2021-06-20 04:36:16
【问题描述】：

是否有任何功能或策略来设置自定义动画时间？我正在尝试创建一个自定义的定时警察 Flash 动画，但我遇到了一些问题。例如，我有 2 种颜色。红色和蓝色。我希望蓝色闪烁 1 秒后停止闪烁，红色开始闪烁，当红色停止闪烁时，蓝色开始闪烁。

【问题讨论】：

我回答了你的问题。请检查一下。

【解决方案1】：

我认为它可以帮助你。

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

<div class="blue"></div>
<div class="red"></div>

【讨论】：

【解决方案2】：

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

要做到这一点，请使用下面示例中的关键帧。

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

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;
  }
}

<div class="blue"></div>
<div class="red"></div>

【讨论】：