css三个图片依次进场

CSS动画可以给网页带来生动的效果，而三个图片依次进场的动画也是常用的网页动画之一。下面我们来看看如何使用CSS实现这种动画效果。

首先，我们需要将三个图片依次排列好。我们可以使用 flexbox 来实现这个效果：

.container {
  display: flex;
  justify-content: space-between;
} 

此时三个图片将会依次排列在 flexbox 容器内，我们可以设置其初始状态的样式：

.item {
  opacity: 0;
  transform: translateY(40px);
} 

这样，三个图片的初始状态就是不可见，且相对于它们原本的位置向下偏移了40像素。接下来，我们需要使用 CSS 动画来实现图片的进场效果：

@keyframes animate {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.item:nth-child(1) {
  animation: animate 1s ease 0.3s forwards;
}
.item:nth-child(2) {
  animation: animate 1s ease 0.6s forwards;
}
.item:nth-child(3) {
  animation: animate 1s ease 0.9s forwards;
} 

使用 keyframes 关键字可以定义一个动画，这里我们将图片渐现并且上移，动画的持续时间为1秒，时间函数为 ease，延迟时间分别为 0.3s，0.6s 和 0.9s。最后使用 forwards 关键字使其在动画结束后保留最终状态。

这样就实现了三个图片依次进场的效果，让我们的网页更加生动。