我正在构建一个带有计时器的智力竞赛应用程序(从10s到0s)。当时间接近0时,我希望我的文本闪烁得越来越快。当计时器在10秒左右时,我希望在剩下的时间较少时减少2秒的过渡时间。
有没有办法用CSS3解决这个问题
您可以设置具有不同关键帧的动画,并将每个关键帧的持续时间设置得越来越短
div {
font-size: 40px;
-webkit-animation: blink 10s 2s;
animation: blink 10s 2s;
}
@-webkit-keyframes blink {
0% {color: blue;}
10% {color: yellow;}
20% {color: blue;}
29% {color: yellow;}
38% {color: blue;}
46% {color: yellow;}
54% {color: blue;}
61% {color: yellow;}
68% {color: blue;}
74% {color: yellow;}
80% {color: blue;}
85% {color: yellow;}
90% {color: blue;}
92% {color: yellow;}
94% {color: blue;}
96% {color: yellow;}
98% {color: blue;}
100% {color: yellow;}
}
@keyframes blink {
0% {color: blue;}
10% {color: yellow;}
20% {color: blue;}
29% {color: yellow;}
38% {color: blue;}
46% {color: yellow;}
54% {color: blue;}
61% {color: yellow;}
68% {color: blue;}
74% {color: yellow;}
80% {color: blue;}
85% {color: yellow;}
90% {color: blue;}
92% {color: yellow;}
94% {color: blue;}
96% {color: yellow;}
98% {color: blue;}
100% {color: yellow;}
}
<div>TEST</div>
假设您使用的是带有以下"眨眼"的CSS动画
@keyframes blink{
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
您可以指定类似ease-in
和ease-out
的CSS计时功能来提高和降低速度:https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function.自定义的边框计时将允许您微调速率。