首页 > Web开发 > 详细

css animation动画

时间:2019-11-22 00:02:14      阅读:93      评论:0      收藏:0      [点我收藏+]
  • 在掘金上看到一个大神总结的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

css animation动画

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!