产品列表分别向左、向右滑动4张图片 animate

对于左右滑动图片的动画效果，可以使用CSS的`@keyframes`和`transform`属性来实现。以下是一个示例代码：

/* 定义动画关键帧 */
@keyframes slideLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes slideRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* 应用动画到图片列表 */
.image-list {
  display: flex;
  overflow: hidden;
}

.image-list img {
  width: 100%;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/* 向左滑动动画 */
.slide-left {
  animation-name: slideLeft;
}

/* 向右滑动动画 */
.slide-right {
  animation-name: slideRight;
}

然后，你可以通过JavaScript来添加相应的类名以触发动画效果。例如，向左滑动4张图片的动画：

const imageList = document.querySelector('.image-list');
imageList.classList.add('slide-left');

向右滑动的话，只需将类名改为`slide-right`即可。

这样，当你对图片列表应用相应的类名后，图片会以滑动的效果向左或向右移动。