最近我們在實驗CSS動畫的時候，遇到了一些問題。

代碼樣例一：
@keyframes move {
from {transform: translate(0,0);}
to {transform: translate(100px,0);}
}
div {
width:50px;
height:50px;
background-color: red;
animation: move 1s linear infinite;
}
問題：動畫一直沒有動起來，仔細檢查后發(fā)現(xiàn)是沒有加 -webkit- 前綴導致的。
解決方案：添加前綴，修改如下：
@-webkit-keyframes move {
from {-webkit-transform: translate(0,0);}
to {-webkit-transform: translate(100px,0);}
}
div {
width:50px;
height:50px;
background-color: red;
-webkit-animation: move 1s linear infinite;
animation: move 1s linear infinite;
}
代碼樣例二：
div {
width: 50px;
height: 50px;
background-color: red;
position: relative;
animation: move 1s ease-in-out infinite;
}
@keyframes move {
0% {transform: translateX(0px);}
50% {transform: translateX(100px);}
100% {transform: translateX(0px);}
}
問題：動畫效果與預期不符，div在移動時會產(chǎn)生跳動的效果。
解決方案：將動畫的狀態(tài)間隔更改為均分的時間段，修改如下：
@keyframes move {
0% {transform: translateX(0px);}
25% {transform: translateX(50px);}
50% {transform: translateX(100px);}
75% {transform: translateX(50px);}
100% {transform: translateX(0px);}
}
div {
width: 50px;
height: 50px;
background-color: red;
position: relative;
animation: move 2s ease-in-out infinite;
}

在實驗CSS動畫時，遇到問題是很正常的，但是只要定位問題，找出解決方案，問題一般都可以得到妥善解決。