css怎么设置图片平滑出入动画

可以使用 CSS3 中的 transition 和 transform 属性来实现图片平滑出入动画效果。具体实现方法如下：

1. 在 CSS 中设置元素的 opacity 和 transform 属性，使图片初始时不可见且不可见区域不占用空间。

2. 设置 transition 属性，使图片的 opacity 和 transform 在一定时间内平滑变化。

3. 通过 JavaScript 控制元素的 opacity 和 transform 属性，来触发图片的平滑出入动画效果。

以下是一个示例代码：

HTML：

<div class="image-container">
  <img src="example.jpg" alt="Example Image">
</div>

CSS：

.image-container {
  overflow: hidden;
}
.image-container img {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

JavaScript：

// 图片平滑出入动画
document.querySelector('.image-container img').style.opacity = 1;
document.querySelector('.image-container img').style.transform = 'scale(1)';

在上面的代码中，通过设置 opacity、transform 和 transition 属性，来实现图片的平滑出入动画效果。其中，overflow 属性用于隐藏图片的不可见区域，使其不占用空间。JavaScript 控制 opacity 和 transform 属性的值，从而触发图片的平滑出入动画效果。通过修改 transform 属性的值，可以实现不同的动画效果，比如旋转、缩放、平移等。