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
动画性能优化：
用position-fixed代替background-attachment
带图片的元素放在伪元素中
will-change
兼容性IE13+ 感觉可以放弃了……
向下提示箭头效果
Document >
总结
以上所述是小编给大家介绍的css3使用animation属性实现炫酷效果，希望对大家有所帮助！
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/CSS/74511.html
