這是一個系列的文章，你也可以查看其他文章：
0、CSS-預熱篇
一、概念
CSS Animation需要指定動畫一個週期重複的次數、是否輪流反向播放動畫，以及動畫效果的名稱，其他和transation類似。
二、語法
animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：
- animation-name（規定需要綁定到選擇器的 keyframe 名稱。）
- animation-duration（規定完成動畫所花費的時間，以秒或毫秒計。）
- animation-timing-function（規定動畫的速度曲線。）
- animation-delay（規定在動畫開始之前的延遲。）
- animation-iteration-count（規定動畫應該播放的次數。）
- animation-direction（規定是否應該輪流反向播放動畫。）
語法：
<single-animation>#
where
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
三、基本用法舉例（W3C示例稍有改動）：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: greenyellow;
position: relative;
animation: mycub 5s infinite;
-webkit-animation: mycub 5s infinite;
/*Safari and Chrome*/
}
@keyframes mycub {
from {
top: 0px;
}
to {
top: 200px;
}
}
@-webkit-keyframes mycub
/*Safari and Chrome*/
{
from {
top: 0px;
}
to {
top: 200px;
}
}
</style>
</head>
<body>
<p><strong>註釋：</strong>Internet Explorer 9-不支持 animation 屬性。</p>
<div></div>
</body>
</html>
四、兼容性
五、參考資料
1、騰訊雲《CSS3動畫animation》
2、阮一峯《CSS動畫簡介》
3、w3cschool《animation屬性》
4、MDN《animation》
5、CSS3 Working Draft 《animation》