從上一節我們知道，使用animation屬性定義CSS3動畫需要2步：
在CSS3中，在使用動畫之前，我們必須使用@keyframes規則定義動畫。
語法：
@keyframes 動畫名
{
0%
{
……
}
……
100%
{
}
}
說明：
0%表示動畫的開始，100%表示動畫的結束。0%和100%是必須的，不過在一個@keyframes規則中可以由多個百分比構成，每一個百分比都可以定義自身的CSS樣式，從而形成一系列的動畫效果。
小技巧：使用@keyframes規則時，如果僅僅只有0%和100%這兩個百分比的話，這時0%和100%還可以使用關鍵詞from和to來代表，其中0%對應的是from，100%對應的是to。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 @keyframes</title>
<style type="text/css">
@-webkit-keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
div
{
width:100px;
height:100px;
border-radius:50px;
background-color:red;
}
div:hover
{
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡我們使用@keyframes規則定義了一個名為mycolor的動畫，剛剛開始時背景顏色為紅色，從0%到30%之間背景顏色從紅色變為藍色，然後從30%到60%之間背景顏色從藍色變為黃色，最後在60%到100%之間背景顏色從藍色變為綠色。動畫執行完畢，背景顏色回歸紅色（初始值）。
很多新手會有疑問，這些百分比是什麼意思，是相對什麼來說的呢？哪還有什麼，肯定是相對“持續時間animation-duration”啦！例如這個例子裡面，我們定義持續時間為5s，則0%指的是0s（開始時），30%指的是1.5s的時候，60%指的是3s的時候，100%則指的是5s（結束時）。假如我們定義持續時間為10s，那麼0%指的是0s（開始時），30%指的是3s的時候，60%指的是6s的時候，而100%則指的是10s（結束時）。以此類推。
我們可以使用@keyframes規則定義動畫，但是這樣定義的動畫並不會自動執行，我們還需要“調用動畫”，這樣動畫才會生效。其實這就跟JavaScript的函數一樣，首先必須定義函數，然後只有調用函數，函數才會執行生效。這個例子中，我們設置在鼠標移動到div元素時（div:hover）使用animation-name屬性調用動畫名，然後使用animation-duration屬性定義動畫持續總時間、animation-timing-function屬性定義動畫函數等。這些屬性在接下來的課程都會有詳細地講解。