css图片左右移动观看 |css的颜色教程

.move {
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}

在上面的代码中，.move是一个类名，大家要给需要实现动画的图片添加这个类名。animation属性包括4个参数：动画名称（move）、动画持续时间（2s）、动画速度曲线（ease-in-out）、动画的循环次数（infinite）。

上面的@keyframes代码块则定义了动画的关键帧（即动画变化的时间点）。在这个动画中，图片在0%的时间点（即动画开始）的水平位置是0像素（即图片不移动），在50%的时间点时，图片移动到了右边200像素的位置，然后在100%的时间点时，图片恢复到了初始位置。

通过调整@keyframes中的不同时间点的位置和值，可以得到不同的动画效果。例如，如果在50%的时间点时，将transform的值设置为translateX(-200px)，则图片会从左边移动到右边。

总的来说，通过使用CSS的动画属性和@keyframes语法，可以轻松实现图片的左右移动动画。这种动画形式可以使网站更加生动，增强用户的体验感。