动画属性的使用方法

　　介绍

这篇文章将为大家详细讲解有关动画属性的使用方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

动画属性

在CSS3中,我们可以使用动画属性来设置动画的持续时间,也就是完成从0%到100%所使用的总时间.animation-duration属性跟CSS3过渡中的transition-duration属性相似。

语法:

动画:时间,

说明:

动画属性取值是一个时间,单位为s(秒),可以为小数如0.5 s。

举例:

& lt; !DOCTYPE html> 　　& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比; 　　& lt; head> 　　& lt; title> CSS3动画属性& lt;/title> 　　& lt;风格类型=拔谋?css"比; 　　@-webkit-keyframes mytranslate 　　{ 　　0% {} 　　100% {-webkit-transform: translateX (100 px);} 　　} 　　容器div:没有(#) 　　{ 　　宽度:40像素; 　　高度:40像素; 　　border - radius: 20 px; 　　背景颜色:红色; 　　-webkit-animation-name: mytranslate; 　　-webkit-animation-timing-function:线性; 　　} 　　#容器 　　{ 　　显示:inline-block; 　　宽度:140 px; 　　边界:1 px固体银; 　　} 　　# div1 {-webkit-animation-duration: 2 s; margin-bottom: 10 px;} 　　# div2 {-webkit-animation-duration: 4 s;} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=癱ontainer"祝辞 　　& lt; div id=癲iv1"祝辞& lt;/div> 　　& lt; div id=癲iv2"祝辞& lt;/div> 　　& lt;/div> 　　& lt;/body> 　　& lt;/html>

效果如下:

动画属性的使用方法

分析:

这个例子中,我们设置# div1的元素动画持续时间为2 s,而设置# div2的元素动画持续时间为4 s。从在线测试中,我们可以明显看出效果。

这里说一句,CSS3动画很多时候都是跟CSS3变形结合起来,然后实现绚丽复杂的动画效果。

关于动画属性的使用方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

动画属性的使用方法