[分享]css3图片逐张出现动画

CSS3中的动画功能非常强大，其中就包括了图片逐张出现的动画效果。当我们需要展示多张图片时，将它们逐张显示会让画面更加生动，这就需要运用到CSS3中的一些属性和技巧。/ HTML代码 / ...

CSS3中的动画功能非常强大，其中就包括了图片逐张出现的动画效果。当我们需要展示多张图片时，将它们逐张显示会让画面更加生动，这就需要运用到CSS3中的一些属性和技巧。

/* HTML代码 */
<div class="pic-wrapper">
  <img src="pic1.jpg">
  <img src="pic2.jpg">
  <img src="pic3.jpg">
  <img src="pic4.jpg">
</div>

/* CSS代码 */
.pic-wrapper img {
  opacity: 0; /* 初始状态为透明 */
  animation: fade-in 1s ease-in-out forwards; /* 动画效果，时间为1秒，缓动方式为ease-in-out */
}

@keyframes fade-in {
  0% { opacity: 0; }
  25% { opacity: 0.25; }
  50% { opacity: 0.5; }
  75% { opacity: 0.75; }
  100% { opacity: 1; } /* 逐渐变得不透明 */
} 

在以上代码中，我们首先定义了一个包裹着多张图片的div容器。接着通过CSS选择器选中每一张图片，将它们的opacity属性设置为0，即初始状态为透明。然后通过animation属性将动画效果实现。

在keyframes关键词下面，我们使用了 fade-in 作为动画名称，并设置了 0% 到 100% 的动画效果，表示从透明到不透明。我们在每一个阶段设置了逐渐变得不透明的值，实现了图片逐张显示的效果。

可以通过更改关键帧的时间和值，以及animation属性里的时间和缓动方式来调整动画效果，从而达到更好的展示效果。