动画是CSS 3最有用的地方,用纯CSS3做出Flash一样的动画。
-webkit-animation:仍旧是一个复合属性,
-webkit-animation: name duration timing-function delay iteration_count direction;
包括以下几个属性
1、-webkit-animation-name 这个属性的使用必须结合 @-webkit-keyframes 一起使用
#rotate { margin: 0 auto; width: 600px; height: 400px; /* 确保我们是在一个 3-D 空间 */ -webkit-transform-style: preserve-3d; /*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */ -webkit-animation-name: x-spin; -webkit-animation-duration: 7s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } /* 定义要调用的动画 */ @-webkit-keyframes x-spin { 0% { -webkit-transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(360deg); }
百分比的意思就是duration的百分比,如果没有设置duration的话,则表示为无穷大;
2、-webkit-animation-duration 表示动画持续的时间,默认为0;
3、-webkit-animation-timing-function 表示动画播放的方式
[语法]: -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out
4、-webkit-animation-delay 表示开始动画之前的延时
[语法] -webkit-animation-delay: delay_time;
5、-webkit-animation-iteration-count 表示动画循环的次数,infinite即为无限次,默认是1。
[语法]-webkit-animation-iteration-count: times_number;
6、-webkit-animation-direction 表示动画的方向
[语法]-webkit-animation-direction: normal(默认) | alternate
normal 方向始终向前
alternate 当重复次数为偶数时方向向前,奇数时方向相反
7、[另外]跟animation有关的其他属性
(1)-webkit-animation-fill-mode : none (默认)| backwards | forwards | both 设置动画开始之前和结束之后的行为(测试结果不是很清晰)
(2)-webkit-animation-play-state: running(默认) | paused 设置动画的运行状态。
本文固定链接: https://www.weisay.com/blog/css3-animation.html | 威言威语
支持的浏览器好少额
以后会多的
加油加油。。。