今天华清远见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各浏览器兼容
热点新闻
前端开发技术库