在 CSS 中旋转动画

Jay Singh 2023年2月20日 2022年4月20日

CSS CSS Animation

无论是改进按钮，在页面加载时消磨时间，还是为登录页面添加一点额外的风格，动画都可以有效地保持读者的注意力并让他们在你的网站上感到高兴。

虽然有多种方法可以将动画视觉效果添加到网页，但最简单的一种方法是使用 CSS 动画，这需要更多的 HTML 和 CSS 知识才能完成。

如果你想在你的工作中使用 CSS 动画，最好在开始之前查看一些成功的 CSS 动画示例。这项额外的研究可以帮助你为你的项目获得想法，并向你展示你可以使用这个重要功能做什么。

构建 CSS 动画需要三样东西：

要动画的 HTML 元素；
将动画连接到此元素的 CSS 规则；
一系列关键帧指定动画开头和结尾的样式。

声明，例如速度和延迟，可用于进一步定制你的动画。现在，让我们看一些 CSS 中旋转动画的例子。

使用 CSS 动画连续旋转图像

在本例中，我们将向我们希望旋转的元素添加 CSS 命令。你可以调整 2s 以减慢或加快旋转持续时间并在动画中旋转到 360 度。

例子：

<img src="/img/DelftStack/logo.png" class="image_rotate" width="200" height="200" />

.image_rotate {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

输出：图像将旋转 360 度。

对于以下示例，我们需要一些包含图像和一些属性的 HTML 标记。如你所见，我们的图片元素具有三个类别：rotate、linear 和 infinite。

每个类都需要我们的 CSS 中的声明块。在动画中，旋转 360 度并修改 2s 以减慢或加快旋转长度。

<img src="/img/DelftStack/logo.png" class="rotate linear infinite" width="200" height="200" />

.rotate {
    animation: rotation 4s;
}
.linear {
    animation-timing-function: linear;
}
.infinite {
    animation-iteration-count: infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

输出：图像将旋转 360 度。