css 向左移动动画 |css图片精灵位置不准确

/*设置一个div元素，定义宽高、背景色和位置*/
div {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 0;
animation: moveLeft 2s forwards;
}
/*定义动画*/
@keyframes moveLeft {
/*从当前位置移动到左边50像素*/
from {
left: 0;
}
to {
left: -50px;
}
}

代码解释：

首先，大家在HTML文件中创建了一个div元素，设定了它的宽高、背景色和位置，并且让它初始时位于页面的最左边（left:0）。

接着，大家使用CSS的animation属性为这个div元素定义了一个名为“moveLeft”的动画。这个动画在2秒内从当前位置移动50像素到左边（left:-50px），使用了forwards属性，表示在动画结束后保持状态（即停在最后一帧的位置）。

最后，大家使用@keyframes关键字定义了“moveLeft”动画，设定了它的关键帧（from和to），使得移动动画从左侧的起始点（from）到左边50像素的位置（to）。

总之，通过代码实现CSS向左移动动画是非常容易的，并且可以让网页看起来更加动态和生动。