css animation动画

• 在掘金上看到一个大神总结的animation相关东西，感觉很震撼，需要记录一下
• 主要也是借助chrome devtool来查看相关的属性，然后去调整

  

  自己只知道有 animation-name animation-delay time-function 次数等，其实这些事w3c上写的，只写了6个，还差两个没写

  • animation-play-state
  • animation-fill-mode
    这两个在w3c里面其实也可以找的到，看了下，现在浏览器的支持度其实还是挺不错的了
    

  如下表格算是比较全的了
  

然后每个属性后面又有不同的取值，比如animation-fill-mode这个取值就有normal |forwards|backwards|both
说说自己的理解，forwards是规定动画结束之后保持最后一帧，而backwards一般是搭配delay，是指还没开始是规定好初始时的位置，就是和第一帧一致

最后，强烈推荐大家看看老姚的文章，都写的非常不错
https://juejin.im/post/5cdd178ee51d456e811d279b

原文地址：https://www.cnblogs.com/ysla/p/11909217.html