css3设置元素动画初步

结构：transition-->animation-->transform

今天接触了一点css3中的transition和transform；在这里写一下自己的一些记忆点，不知对不对，如果有认知不同之处，请大方的指出，谢谢；

css3中提供了一些可以让元素进行动态的改变，产生一种flash动画的效果，例如：旋转(rotate)、缩放（scale）、倾斜（skew）、移动（translate）、这些都是transform中的一些属性、为了兼容特定的浏览工具；需要加上前缀-webkit；即-webkit-transform：这个css属性是用来定义元素的变形的，而真正的让元素产生动画的连贯效果需要一个元素来封装-webkit-transform中的属性，一般使用keyframes来完成这个操作，给一个动画定义个名字：@-webkit-keyframes{}然后通过webkit-animation进行调用，在webkit-animation中，封装了很多的属性：name,duration,timing-function,delay,iteration-count,direciton；其中name就是用来调用webkit-keyframes中的样式，而这些样式最顶级的元素应该是webkit-transition，它下面的属性包括了：animation，而animation是一个符合元素，它自身就已经包含了一些效果，但是为了达到更好的扩展性，就通过一个命名的方式webkit-keyframes来扩展功能，下面罗列出来一些webkit-animation中的属性详情：

CSS3动画技术 – Animation

 

-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 设置动画的运行状态。

 

详细介绍请参考官方文档：http://www.w3.org/TR/css3-animations/#CSS3-TRANSITIONS