如何去除 css animation 的渐变过程

需求

在react或者vue这种单页面应用的项目里，我们使用定时器来实现动画时需要做销毁定时器操作，但是有时候是个很小的动画效果，也要做销毁，这个挺麻烦的。那我们为什么不用css动画代替呢？

做法

@keyframes 的属性是0%到100%，假如我们写的是0%-100%，那绝对会有渐变效果

@keyframes twinkling{ 
  0%{ 
    opacity: 0; 
  } 
  100%{ 
    opacity: 1; 
  } 
}

那所以我们换一个写法，0%-50%的时间显示，51%-100%的时间隐藏，不就没有过渡效果了嘛。

// 一闪一闪动画
.twinkle{ 
  animation: twinkling 0.5s infinite linear; 
} 
.animated{ 
  animation-duration: 0.5s; 
} 

@keyframes twinkling{ 
  0%, 50%{ 
    opacity: 0; 
  } 
  51%, 100%{ 
    opacity: 1; 
  } 
}

结论

那所以聪明的你一定也发现了，@keyframes 的百分比值的实质就是一个时间进度条。