CSS 动画可以让我们的网站更加吸引人，其中一个经典的动画效果是图片从左淡入。这种效果可以让图片平滑地出现在屏幕上，而不是突然出现或者有一个明显的跳跃。

/* 添加一个类名为.fade-in-left的样式 */
.fade-in-left {
opacity: 0; /* 设置透明度为0 */
position: relative; /* 设置定位属性 */
left: -50px; /* 将图片左侧移动50像素 */
transition: opacity 0.5s ease-out, left 0.5s ease-out; /* 添加过渡效果 */
}
/* 当该元素出现在屏幕上时，添加.active类名 */
.fade-in-left.active {
opacity: 1; /* 设置透明度为1 */
left: 0px; /* 将图片左侧移动回原来位置 */
}

以上代码中，我们创建了一个名为.fade-in-left的类名，并将其应用于需要添加动画效果的图片元素上。在这个类名中，我们设置了透明度为0，让图片最初看不见。然后，我们通过设置 left 属性将图片向左移动，以便它离屏幕左侧 50px 。接下来，我们通过使用 transition 属性来添加过渡效果，让图片从透明度为0到透明度为1，同时从左往右移动。

为了触发这个动画效果，我们需要添加一个名为.active的类名。当这个类名添加到图片元素中时，动画效果就会出现。我们可以通过 JavaScript 来控制这个类名的出现和消失，或者使用 CSS :hover 伪类等方法。

通过这种方式，我们可以为网站添加相对较小但非常重要的细节，吸引更多的访问者并提高用户体验。