css中的animation是什么


本文摘自PHP中文网,作者V,侵删。

css中的animation是一个简写属性,用于设置动画属性,如【animation-duration】,规定完成动画所花费的时间,该属性必须规定,否则动画时长为0,无法播放。

本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。

animation 属性是一个简写属性,用于设置六个动画属性:

(学习视频推荐:css视频教程)

1

2

3

4

5

6

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

语法:

1

animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

举例:

使用简写属性,将动画与 div 元素绑定:

1

2

3

4

5

div

{

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

}

相关推荐:CSS教程

以上就是css中的animation是什么的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css如何制作圆

如何通过css设置背景图片全屏

css如何设置div不换行

如何使用css设计出一个表单页面(附示例)

css如何画线

css是什么软件

css的flex怎么根据内容更改高度

css怎么让图案上下浮动

推荐一个chrome devtools实用小插件:css overview panel

css div如何居中显示

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...