css3 帧动画 加图片

CSS3帧动画是一种基于CSS3的动画技术，可以让网页中的元素呈现出流畅、动感的效果。今天我们来介绍一下如何通过CSS3帧动画来实现给图片加上动画效果。

首先，我们需要在HTML中引入需要添加动画效果的图片：

<img src="xxx.png" id="animated-img">

接下来，我们需要在CSS中定义需要使用到的类名，并设置相关的动画属性：

.animated {
    animation-name: my-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes my-animation {
    0% {
        transform: translateY(0); /* 初始状态 */
    }
    50% {
        transform: translateY(-10px); /* 中途状态 */
    }
    100% {
        transform: translateY(0); /* 结束状态 */
    }
}

在上述代码中，我们定义了一个名为“my-animation”的动画，它由三个关键帧组成，每个关键帧表示动画在不同时间点上的状态。我们将图片对应的类名设置为“animated”，并将“animation-name”属性设置为刚定义的动画名。此外，我们还设置了“animation-duration”属性，用于控制动画的持续时间，以及“animation-fill-mode”属性，用于指定动画结束后元素的最终状态。

最后，我们只需要在HTML的img标签中添加刚定义的类名即可：

<img src="xxx.png" id="animated-img" class="animated">

现在，我们已经成功为图片添加了帧动画效果，它将会在页面加载完成后开始自动播放。

总结一下，通过CSS3帧动画，我们可以轻松实现给图片添加动画效果的功能。使用简单、效果出色，这也是目前众多网页设计师喜爱使用CSS3帧动画的原因之一。希望本文能够对大家有所帮助。