純CSS3可以做出非常漂亮的動畫效果，而且也比較容易上手。下面我們來講解一下幾種CSS3動畫實現(xiàn)方法：

1. 通過使用transition逐漸改變元素的屬性值，形成動畫效果。

.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s;
}
.box:hover {
width: 200px;
}

在上面的例子中，鼠標hover到.box元素上時，它的寬度會從100px逐漸變?yōu)?00px，持續(xù)時間為1秒。

2. 通過使用animation關(guān)鍵字，定義一組動畫關(guān)鍵幀。

.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s linear infinite;
}
@keyframes move {
from {
transform: rotate(0deg) translateX(0);
}
to {
transform: rotate(360deg) translateX(200px);
}
}

在上面的例子中，.box元素會一直執(zhí)行move動畫，持續(xù)時間為2秒，速度為線性，無限循環(huán)。在關(guān)鍵幀中，我們定義了元素在動畫過程中需要執(zhí)行的各個狀態(tài)，最終效果是旋轉(zhuǎn)360度，同時沿X軸方向平移200px。

3. 通過CSS濾鏡實現(xiàn)動畫效果。

.box {
width: 100px;
height: 100px;
background-color: red;
transition: filter 1s;
}
.box:hover {
filter: grayscale(100%);
}

在上面的例子中，鼠標hover到.box元素上時，它會逐漸變?yōu)榛疑＿@個效果是通過在:hover狀態(tài)下使用濾鏡的方式來實現(xiàn)的。

這些都是非常簡單的CSS3動畫實現(xiàn)方法，如果你想要實現(xiàn)更加復(fù)雜的效果，可以通過組合這些方法來達到目的。