css3从左边进来的动画

CSS3中提供了丰富的动画效果，其中从左边进来的动画是比较常用的一种，能够给网页带来非常炫酷的视觉效果。

/* 定义动画 */
@keyframes slideInLeft {
   from {
      transform: translateX(-100%);
   }
   to {
      transform: translateX(0);
   }
}

/* 应用动画效果 */
.slide-in-left {
   animation-name: slideInLeft;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}

在以上代码中，我们首先使用@keyframes定义了一个名为slideInLeft的动画效果，使用transform属性来实现左边进来的效果。其中from表示起始状态，将元素向左移动100%的距离，即完全隐藏；to表示结束状态，将元素移动回原位，即想要展现的位置。

接下来我们在需要应用该动画的元素中添加.slide-in-left类，设置animation-name为slideInLeft，即应用我们刚刚定义的动画效果。同时设置animation-duration为1s，即动画播放的时间为1秒。最后指定animation-fill-mode为forwards，表示动画结束后元素将保留结束状态，不会回到起始状态。

这样我们就使用CSS3实现了一个从左边进入的动画效果，希望对网页的呈现有所帮助。