css动画实验遇到的问题 |css3 灰色 按钮图标

代码样例一：
@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;
}
问题：动画一直没有动起来，仔细检查后发现是没有加 -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在移动时会产生跳动的效果。
解决方案：将动画的状态间隔更改为均分的时间段，修改如下：
@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动画时，遇到问题是很正常的，但是只要定位问题，找出解决方案，问题一般都可以得到妥善解决。