使用CSS3动画加速闪烁计时器

时间:2015-04-06 11:31:09

标签: html css css3 css-transitions css-animations

我正在建立一个带定时器的测验应用程序(从10s到0s)。当时间量接近0时,我希望我的文本闪烁得越来越快。当计时器大约10秒时,我希望在剩下的时间减少时,转换时间减少2秒。

有没有办法用CSS3解决这个问题?

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-inease-out,以便提高和降低速度:https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function。 自定义贝塞尔定时将允许您微调速率。