动画练习-360度旋转-animation

动画效果，体验animation的魅力

animation

也是css3属性的一员

animation: name duration timing-function delay iteration-count direction;
包括：
动画名，
完成一次动画所需要的时间，
动画速度函数(linear,ease等)，
动画开始之前的延时，
动画执行的次数（默认是1，常用inifite）
规定是否应该轮流反向播放动画。（默认是normal，alternate代表完成动画一次需要返回去一次）

//必须要的两个属性，即动画名和完成动画所需要的时间
animation: name duration;

360度旋转小案例

• html

<img src="T001.jpg" />

• css

img {
	border-radius: 50%;
	animation: rotateArround 3.5s linear 3s infinite alternate;
	-webkit-animation: rotateArround 3.5s linear 3s infinite alternate;
	-moz-animation: rotateArround 3.5s linear 3s infinite;
	-ms-animation: rotateArround 3.5s linear 3s infinite;
	-o-animation: rotateArround 3.5s linear 3s infinite;
}

@keyframes rotateArround {
	from {transform: rotateZ(0deg);}
	to {transform: rotateZ(360deg);}
}

@-webkit-keyframes rotateArround {
	from {-webkit-transform: rotate(0deg);
	}
	to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotateArround {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}

@-ms-keyframes rotateArround {
	from {-ms-transform: rotate(0deg);}
	to {-ms-transform: rotate(360deg);}
}

@-o-keyframes rotateArround {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(360deg);}
}