有没有设置自定义动画定时的功能或战术？我正在尝试创建一个自定义定时警察flash动画，但我有一些问题。例如，我有两种颜色。红色和蓝色。我想让蓝色闪烁1秒，停止闪烁，红色开始闪烁，当红色停止闪烁，蓝色开始闪烁。
我想这能帮到你。
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}
}<div class="blue"></div>
<div class="red"></div>
使用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;
}
}<div class="blue"></div>
<div class="red"></div>