動畫效果，體驗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);}
}