CSS 带有 steps() 的动画计时函数尝试使颜色闪烁,但颜色正在混合
CSS Animation Timing Function with steps() to try to blink colors, but colors are blending
我一直在尝试使两种颜色闪烁,使用以下 CSS 规则,但颜色最终混合在一起。
这是 jsfiddle:http://jsfiddle.net/1kyba3rd/
以下是 CSS 规则:
<style>
.block {
width: 100px;
height: 100px;
border: 1px solid black;
/* Chrome, Safari, Opera */
-webkit-animation-name: flash-colors;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: steps(2, start);
-webkit-animation-iteration-count: infinite;
/* Standard Syntax */
animation-name: flash-colors;
animation-duration: 1s;
animation-timing-function: steps(2, start);
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
/* Standard syntax */
@keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
</style>
闪烁无法正常工作,因为您在动画结束时设置了 background-color:yellow
(100%) 并且在开始时设置了 background-color:white
,将第一个设置为 50%
以便动画按预期工作 - demo
我一直在尝试使两种颜色闪烁,使用以下 CSS 规则,但颜色最终混合在一起。
这是 jsfiddle:http://jsfiddle.net/1kyba3rd/
以下是 CSS 规则:
<style>
.block {
width: 100px;
height: 100px;
border: 1px solid black;
/* Chrome, Safari, Opera */
-webkit-animation-name: flash-colors;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: steps(2, start);
-webkit-animation-iteration-count: infinite;
/* Standard Syntax */
animation-name: flash-colors;
animation-duration: 1s;
animation-timing-function: steps(2, start);
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
/* Standard syntax */
@keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
</style>
闪烁无法正常工作,因为您在动画结束时设置了 background-color:yellow
(100%) 并且在开始时设置了 background-color:white
,将第一个设置为 50%
以便动画按预期工作 - demo