我正在建立一个带定时器的测验应用程序(从10s到0s)。当时间量接近0时,我希望我的文本闪烁得越来越快。当计时器大约10秒时,我希望在剩下的时间减少时,转换时间减少2秒。
答案 0 :(得分:1)
您可以设置具有不同关键帧的动画,并将每个关键帧的持续时间设置得更短和更短
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>
答案 1 :(得分:0)
假设您正在使用带有以下“blink”的CSS动画
@keyframes blink{
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
您可以指定CSS时序功能,例如ease-in
和ease-out
,以便提高和降低速度:https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function。
自定义贝塞尔定时将允许您微调速率。