animation让图片从左到右滑出

你可以使用CSS的transition和transform属性来实现这个动画效果。下面是一个简单的示例代码：

HTML:

<div class="slide-in">
  <img src="your-image.jpg" alt="your-image">
</div>

CSS:

.slide-in {
  overflow: hidden;
}

.slide-in img {
  width: 100%;
  transform: translateX(-100%);
  transition: transform 0.5s ease-out;
}

.slide-in img.active {
  transform: translateX(0%);
}

JS:

const slideIn = document.querySelector('.slide-in');
const image = slideIn.querySelector('img');

function slideImage() {
  image.classList.add('active');
}

slideIn.addEventListener('mouseenter', slideImage);
slideIn.addEventListener('touchstart', slideImage);

在这个示例中，我们使用了CSS的overflow属性来隐藏图片的溢出部分，使用transform属性将图片向左移动，使用transition属性来设置动画效果。在JS中，我们监听div的鼠标进入或触摸开始事件，并将图片的class设置为“active”，这样就可以触发CSS中设置的动画效果，使图片从左到右滑出。