本文摘自PHP中文网,作者V,侵删。
css中的animation是一个简写属性,用于设置动画属性,如【animation-duration】,规定完成动画所花费的时间,该属性必须规定,否则动画时长为0,无法播放。
本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。
animation 属性是一个简写属性,用于设置六个动画属性:
(学习视频推荐:css视频教程)
1 2 3 4 5 6 |
|
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
语法:
1 |
|
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
举例:
使用简写属性,将动画与 div 元素绑定:
1 2 3 4 5 |
|
相关推荐:CSS教程
以上就是css中的animation是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
推荐一个chrome devtools实用小插件:css overview panel
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者