如何在css3中使用animation属性

这篇文章给大家介绍如何在css3中使用animation属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联公司主营天津网站建设的网络公司,主营网站建设方案,APP应用开发,天津h5小程序定制开发搭建,天津网站营销推广欢迎天津等地区企业咨询

animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画

animation-name属性为动画指定一个名称

animation-name兼容主流的浏览器,不过还是需要加前缀去兼容

animation-name有两个属性值,分别是keyframename和none





Document



    
        
        
        
        
    

animation-duration 动画持续时间 默认是0

animation-timing-function 动画时间函数

animation-delay 动画延迟时间

animation-delay 属性定义动画什么时候开始,单位可以是秒(s)或毫秒(ms),允许负值,-2s使动画马上开始,但会跳过2s进入动画

animation-iteration-count 动画循环次数

animation-iteration-count: number | infinite 默认为1

animation-direction: normal | reverse | alternate | alternate-reverse 正常; 反向; 正反交替; 反正交替

alternate 和 alternate-reverse ,如果animation-itreation-count 不是设置成 infinite ,则只会执行一次就停止

animation-fill-mode 动画延迟未执行时,或者动画执行完毕后的停留状态(动画不能设置为循环,否则无法停止)

animation-fill-mode: none | forwards | backwards | both 无 结束状态 开始状态 看情况

animation-play-state: running | paused 动画运行状态:运行 | 暂停

animation 简写

animation: name duration timing-function delay iteration-count direction fill-mode play-state





Document



    
        
        
        
        
    

如何在css3中使用animation属性

动画性能优化:

用position-fixed代替background-attachment

带图片的元素放在伪元素中

will-change

兼容性IE13+ 感觉可以放弃了……

向下提示箭头效果





Document



    
>

关于如何在css3中使用animation属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享标题:如何在css3中使用animation属性
URL网址:http://scyanting.com/article/gepgch.html

其他资讯