說起css3動畫，就必須說說 transform，translate，transition，animation這4個屬性，transform主要定義元素的動作，比如旋轉、傾斜、位移等，translate是transform里面的屬性，用于2D/3D位移。后2個主要對動作進行描述，動畫時間、速度曲線、次數等。

如何快速上手基礎的CSS3動畫

下面我用是一些簡單的示例，讓大家快速的入門上手:

快速開始第一個動畫

<style>
.div1{
 width: 100px;
 background: red;
 /** 動畫描述：寬度改變動畫 用時 1s*/
 transition: width 1s;
}
.div1:hover{
 width: 200px;
 background: blue;
}
</style>

<div class="div1">動畫</div>

如何快速上手基礎的CSS3動畫

這里hover事件時改變寬度和背景顏色，用transition來描述動畫，由于我們只對width進行了描述，所以背景色，鼠標指上去，會立馬變色，并不會有漸變的過程。

這里為什么用transition而不用animation？那就要說說他們直接的區別了。

transition需要觸發一個事件，而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。transition屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。

現在明白了吧，因為我們用的hover事件，所以要用transition。

下面請看第二個例子

快速開始第二個動畫

<style>
.div1{
 width: 100px;
 background: red;
 /** 動畫描述：寬度顏色改變動畫 用時 1s infinite（無限次）*/
 animation: second 1s infinite;
 color: #fff;
}
@keyframes second{
 /**開始（可以用百分比表示）*/
 from {
 width: 100px;
 background: red;
 }
 /**結束（可以用百分比表示）*/
 to {
 width: 200px;
 background: blue;
 }
 /** or */
 /**開始*/
 0% {
 width: 100px;
 background: red;
 }
 /**中間可以加多個區間*/
 /**結束*/
 100% {
 width: 200px;
 background: blue;
 }
}
</style>

<div class="div1">動畫</div>

如何快速上手基礎的CSS3動畫

這里動畫從加載就開始執行，所以用了animation，改變寬度和背景色，用時1s，并且無限次循環執行。@keyframes規則是創建動畫。 -webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用于兼容不同瀏覽器。

快速開始第三個動畫

<style>
.div1{
 width: 100px;
 background: red;
 animation: second 1s infinite;
 color: #fff;
}
@keyframes second{
 100% {
 transform: rotate(20deg);
 }
}
</style>

<div class="div1">動畫</div>