CSS3中的動畫功能分為Transitions功能與Animations功能，這兩種功能都可以通過改變CSS中的屬性值來產(chǎn)生動畫效果。
Transitions功能支持從一個屬性值平滑過渡到另一個屬性值，Animations功能支持通過關(guān)鍵幀的指定來在頁面上產(chǎn)生更復(fù)雜的動畫效果。

Transitions功能

Transitions功能的使用方法

Transitions功能通過將元素的某個屬性從一個屬性值在指定的時間內(nèi)平滑過渡到另一個屬性值來實現(xiàn)動畫功能，可通過transitions屬性來使用Transitions功能。

// transition屬性的使用方法
transition:property duration timing-function

其中property表示對哪個屬性進行平滑過渡，duration表示在多長時間內(nèi)完成屬性值的平滑過渡， timing-function表示通過什么方法來進行平滑過渡。

<style type="text/css">
div{
  background-color: #ffff00;
  transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
}
div:hover{
  background-color: #00ffff;
}
</style>
<div>示例文字</div>

上面的代碼當(dāng)鼠標(biāo)指針移動到div元素上時，在1秒內(nèi)div元素的背景色會從黃色平滑過渡到淺藍(lán)色。
在CSS3中，還有另外一種使用Transitions功能的方法，就是將transitions屬性中的三個參數(shù)改寫成transitíon-property屬性、transition-duratíon屬性、transition-timing-function屬性，這三個屬性的含義及屬性值的指定方法與transitíons屬性中的三個參數(shù)的含義及指定方法完全相同。

-webkit-transition-property:background-color;
-webkit-transition-duration:1s;
-webkit-transition-timing-tunction:linear;
-moz-transition-property:background-color;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-o-transition-property:background-color;
-o-transition-duration:18;
-o-transition-timing-function:linear;

使用Transitions功能同時平滑過渡多個屬性值

可以使用Transitions功能同時對多個屬性值進行平滑過渡。

<style type="text/css">
div{
  background-color: #ffff00;
  color: #000000;
  width: 300px;
  transition:  background-color 1s linear, color 1s linear, width 1s linear;
  -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
  -moz-transition:  background-color 1s linear, color 1s linear, width 1s linear;
  -o-transition:  background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover{
  background-color: #003366;
  color: #ffffff;
  width: 400px;
}
</style>
<div>示例文字</div>

上面的代碼當(dāng)鼠標(biāo)指針放到div元素上時，在1秒內(nèi)完成了div元素的背景色、字體色和寬度這三個屬性值的平滑過渡。
另外，可以通過改變元素的位置屬性值、實現(xiàn)變形處理的transform屬性值來讓元素實現(xiàn)移動、旋轉(zhuǎn)等動畫效果。

<style type="text/css">
img{
  position: absolute;
  top: 70px;
  left: 0;
  transform: rotate(0deg);
  transition: left 1s linear, -o-transform 1s linear;
  -webkit-transform: rotate(0deg);
  -webkit-transition: left 1s linear, -webkit-transform 1s linear;
  -moz-transform: rotate(0deg);
  -moz-transition: left 1s linear, -moz-transform 1s linear;
  -o-transform: rotate(0deg);
  -o-transition: left 1s linear, -o-transform 1s linear;
}
div:hover img{
  position: absolute;
  left: 30px;
  transform: rotate(720deg);
  -webkit-transform: rotate(720deg);
  -moz-transform: rotate(720deg);
  -o-transform: rotate(720deg);
}
</style>
<div>
  <img src="flower.png" />
</div>

上面的示例中有一個div元素，div元素中有一張圖片，當(dāng)鼠標(biāo)指針停留在圖像上時，圖像會向右移動30px，并且順時針旋轉(zhuǎn)720度。

Animations功能

Animations功能的使用方法

Animations功能與Transitions功能相同， 都是通過改變元素的屬性值來實現(xiàn)動畫效果的。區(qū)別在于：使用Transitions功能時只能通過指定屬性的開始值與結(jié)束值，然后在這兩個屬性值之間進行平滑過渡的方式來實現(xiàn)動畫效果，因此不能實現(xiàn)比較復(fù)雜的動畫效果，而Animations則通過定義多個關(guān)鍵幀以及定義每個關(guān)鍵幀中元素的屬性值來實現(xiàn)更為復(fù)雜的動畫效果。

<style type="text/css">
div{
  background-color: red;
}
@-webkit-keyframes mycolor{
  0%{
    background-color: red;
  }
  40%{
    background-color: darkblue;
  }
  70%{
    background-color: yellow;
  }
  100%{
    background-color: red;
  }
}
@keyframes mycolor{
  0%{
    background-color: red;
  }
  40%{
    background-color: darkblue;
  }
  70%{
    background-color: yellow;
  }
  100%{
    background-color: red;
  }
}
div:hover{
  animation-name:mycolor;
  animation-duration:5s;
  animation-timing-function:linear;
  -webkit-animation-name:mycolor;
  -webkit-animation-duration:5s;
  -webkit-animation-timing-function:linear;
}
</style>
<div>示例文字</div>

使用Animations功能的時候，如果使用的是Safari或Chrome瀏覽器，會使用如下所示的方法來創(chuàng)建關(guān)鍵幀的集合。

@-webkit-keyframes 關(guān)鍵幀集合名{ 創(chuàng)建關(guān)鍵幀的代碼 }

關(guān)鍵幀的集合創(chuàng)建好之后， 在元素的樣式中使用該關(guān)鍵幀的集合。

div:hover{
    animation-name:mycolor;
    animation-duration:5s;
    animation-timing-function:linear;
    -webkit-animation-name:mycolor;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
}

在animation-name屬性中指定關(guān)鍵幀集合的名稱；在animation-duratiion屬性中指定完成整個動畫所花費的時間；在animation-timing-function屬性中指定實現(xiàn)動畫的方法。

實現(xiàn)多個屬性值同時改變的動畫

如呆要想實現(xiàn)讓多個屬性值同時變化的動畫， 只需在各關(guān)鍵幀中同時指定這些屬性值就可以了。

<style type="text/css">
div{
  position: absolute;
  background-color: yellow;
  top:100px;
  width:500px;
}
@-webkit-keyframes mycolor{
  0%{
    background-color: red;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  40%{
    background-color: darkblue;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
  }
  70%{
    background-color: yellow;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
  }
  100%{
    background-color: red;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}
@keyframes mycolor{
  0%{
    background-color: red;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  40%{
    background-color: darkblue;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
  }
  70%{
    background-color: yellow;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
  }
  100%{
    background-color: red;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}
div:hover{
  animation-name: mycolor;
  animation-duration: 5s;
  animation-timing-function: linear;
  -webkit-animation-name: mycolor;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
}
</style>
<div>示例文字</div>

animation的屬性

animation簡寫形式：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-fill-mode的取值

實現(xiàn)動畫的方法