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

【问题标题】：Speed up blink timer using CSS3 animation使用 CSS3 动画加速闪烁计时器
【发布时间】：2015-04-11 18:28:41
【问题描述】：

我正在构建一个带有计时器的测验应用程序（从 10 秒到 0 秒）。当时间量接近 0 时，我希望我的文字闪烁得越来越快。当计时器在 10 秒左右时，我希望在剩余时间较少时减少 2 秒的过渡时间。

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

【问题讨论】：

标签： html css css-transitions css-animations

【解决方案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;}
 }

&lt;div&gt;TEST&lt;/div&gt;

【讨论】：

【解决方案2】：

假设您正在使用带有以下“闪烁”的 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。自定义贝塞尔时序可让您微调速率。

【讨论】：