css的animation屬性是css3新增的一個動畫屬性，這個屬性比較簡單實用，甚至可以替代一些要js才能做的動畫。
語法:

常用簡寫：
//引數 要繫結的運動名稱 | 運動持續時間 | 運動曲線| 延遲時間| 重複次數|動畫輪流反向執行
animation：run 3s linear 0.5s infinite alertnate

div{
	width:300px;
	height:260px;
	background:#F2F2F2;
	animation: run 3s;
}


@keyframes run{
	from{
		width:300px
		height:260px
		background:#F2F2F2;
		rotate:(0deg)
	}
	to{
		width:600px;
		height:550px
		background:#67686D;
		rotate:(360deg)

	}
}

//這段程式碼會讓div從寬300px，高260px，背景顏色#F2F2F2f， 3秒逐漸變化至w:600px，h:550px，bg:#67686D,順便旋轉個360度

@keyframes run{
	0%{
		width:300px
		height:260px
		background:#F2F2F2;
	}
	50%{
		width:400px;
		height:350px
		background:#67686D;
	}
	100%{
		width:500px;
		height:450px
		background:#67686D;
	}
}
//當然了也可用百分百，這個東西甚至可以用來做輪播圖。

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

最後介紹一下animation外掛，這是一個css外掛裡面封裝了各種animation的css3
動畫下面是他的下載地址。

大概用法就是先引入一下那個animation

然後在元素的行內樣式裡要加 animation 和動畫的名字
還有幾個可選屬性用的最多的就是
animation-delay和animation-duration

animation-delay是延遲多久播放的意思，數值單位是 s ：//animation-delay:3s

animation-duration是動畫持續多久的意思，數值也是s：//animation-duration：0.5s

這是一個swiper的中文站裡面有詳細的中文API翻譯，當然了也可以去百度找英文版的swiper官網
swiper下載地址