昨天講到，讓 h1 使用 animation 功能滑入畫面中~

今天要在講一些 animation 其他屬性的功能，

animation-iteration-count 重覆播放

上一篇說到我們用了

h1
	width: 200px
	height: 100px
	color: #FFF
	text-align: center
	line-height: 100px
	background: #e03
	animation: slidein 3s
	-webkit-animation: slidein 3s

這樣的css屬性後，接著~

我們在 h1 下再多添加一行屬性來讓動畫replay(正確來說應該要2行啦...)

h1
	width: 200px
	height: 100px
	color: #FFF
	text-align: center
	line-height: 100px
	background: #e03
	animation: slidein 3s
	-webkit-animation: slidein 3s
	animation-iteration-count: infinite //新增的
	-webkit-animation-iteration-count: infinite //新增的

接著發佈測試一下，就會發現當動畫撥放完畢之後，

立刻會在接續下一輪的播放，

animation-direction 逆向播放

但這樣有點奇怪，感覺好像突然跳格一樣讓人看了很不舒服....

這邊我們再多加一個屬性，讓本來撥放完成的動畫，

逆向的撥放回去，接著再重頭開始~

h1
	width: 200px
	height: 100px
	color: #FFF
	text-align: center
	line-height: 100px
	background: #e03
	animation: slidein 3s
	-webkit-animation: slidein 3s
	animation-iteration-count: infinite
	-webkit-animation-iteration-count: infinite
	animation-direction: alternate //逆向播放
	-webkit-animation-direction: alternate //逆向播放

加入完成後我們測試一下，就會發現到~

當動畫完成一輪播放後，接著會逆向的往一開始的狀態回去，

當回到最起點之後，接著會開始下一輪的動畫，這樣看起來是不是就順眼多了呢!! XD

最後，我們將上述幾點做成 animation 屬性簡寫的話，

就會是這樣：

h1
	width: 200px
	height: 100px
	color: #FFF
	text-align: center
	line-height: 100px
	background: #e03
	animation: slidein 3s infinite alternate //簡寫屬性
	-webkit-animation: slidein 3s infinite alternate //簡寫屬性