css3動畫 animation

animation 實現一個旋轉鼠標放上暫停
https://codepen.io/bb798sky/pen/KOeEZE

---

animation 八個屬性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	說明
animation-name	指定要綁定到選擇器的關鍵幀的名稱
animation-duration	動畫指定需要多少秒或毫秒完成 (1s、2s、1.5s、1500ms)
animation-timing-function	設置動畫將如何完成一個週期 ( linear:勻速、 ease:低速開始結束時變慢(默認)、 ease-in:低速開始、 ease-out:低速結束、 ease-in-out：低速開始變快低速結束 cubic-bezier(n,n,n,n):在 cubic-bezier 函數中自己的值0 到 1 的數值。 )
animation-delay	設置動畫在啓動前的延遲間隔
animation-iteration-count	定義動畫的播放次數 infinite
animation-direction	指定是否應該輪流反向播放動畫 normal:默認正常、 reverse:反向、 alternate:動畫在奇數次（1、3、5…）正向播放，在偶數次（2、4、6…）反向播放、 alternate-reverse:同上相反;
animation-fill-mode	forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）iteration-count不能是infinite。
animation-play-state	指定動畫是否正在運行或已暫停 常用通過加僞類 animation-play-state:paused; 暫停動畫

旋轉鼠標放上暫停css示例

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myrotate 1500ms infinite;
  	animation-timing-function: linear;
}

div:hover{
  animation-play-state:paused;
}

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