昨天介紹了 animation 可以用的 css 屬性，今天就要來實作一下動畫的效果了!!

跟前天的有些許的不同，這次不用滑入該 div 物件，

直接在讀取css完成後直接play動畫效果。

第一個測試，直接定義 h1 標籤

首先我們在 body 裡面寫好 html

	<p>來測試一下 animation 吧!!</p><br>
	<h1>我是H1</h1>

接著在 css 的部份我們用

h1
	width: 100px
	height: 100px
	color: #FFF
	text-align: center
	line-height: 100px
	background: #e03

	-webkit-animation-duration: 3s
	-webkit-animation-name: slidein
@-webkit-keyframes slidein
	from
		margin-left: 100%
	to
		margin-left: 0%

來看一下效果，就會看到 h1 物件從畫面左邊經過3秒跑到右邊了~

這種寫法是接針對每個 animation 屬性的方式去寫，要打的文字比較多也比較麻煩...

所以我們接著把它改成簡寫屬性~css就要改成

animation: slidein 3s
-webkit-animation: slidein 3s

這樣我們再測試一次，確定 h1 的動畫還是可以使用的，

接著，

我們要來嘗試一下，在0~100%的過程中，加入更多的變化~

在 @-webkit-keyframes slidein 裡面來新增要做的動畫效果，

@-webkit-keyframes slidein
	from
		margin-left: 100%
	50%
		font-size: 200%
		margin-left: 70%
	75%
		font-size: 500%
		margin-left: 10%
	to
		margin-left: 0%

接著發佈後，會發現到字體一開始從右邊出現，

中間會第一段放大，接著快到左邊後會第二次放大，

之後到達最左邊後，字體大小會回歸到 100 %的狀態，

所以可以知道，

animation 完成動畫後，會回歸到 h1 的 css 原始樣式，

中間過程的變化並不會保留下來。