当前位置: IT培训 > HTML5培训 > 前端开发 > CSS > CSS开发教程之Animation动画属性
CSS开发教程之Animation动画属性 时间:2017-06-06     来源:CSS开发小赢家

今天华清远见CSS/CSS3开发技术频道为大家带来的技术干货是Animation动画属性,有需要的小伙伴可以自行过来阅读哦,希望可以帮到各位小伙伴。

animation复合属性

animation-name: 规定动画名称;

animation-duration: 动画执行完成所需时间,单位s;

animation-timing-function: 动画运动曲线,默认为ease;

animation-timing-function:linear(匀速)

animation-timing-function:ease(慢速开始,然后加快,慢速结束)

animation-timing-function:ease-in(慢速开始)

animation-timing-function:ease-out(慢速结束)

animation-timing-function:ease-in-out(慢速开始,慢速结束)

animation-timing-function:cubic-bezier(cubic-bezier函数中自定义值)

animation-delay: 规定是否延迟执行,默认为0;

animation-iteration-count: 动画执行次数;

animation-iteration-count: 1(一次)

animation-iteration-count: infinite(无限循环)

animation-direction: 动画是否逆向播放,默认normal;

animation-direction: normal(默认值不反向)

animation-direction: alternate(反向)

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

animation-fill-mode: 动画执行完成的状态;

animation-fill-mode: none(无动作)

animation-fill-mode: forwards(停留在执行完成的后一帧)

animation-fill-mode: backwards(返回起始位置)

animation-fill-mode: both(向前、向后填充模式都被应用)

@keyframes name{} 执行动画;

animation各浏览器兼容

X