[分享]css3教程动画不停

CSS3是一款强大的样式语言，可以实现各种惊人的效果，如动画。在本教程中，我们将学习如何创建不断动画的CSS3动画。/ 创建一个循环动画 / keyframes rotate{ 0{ transfor...

CSS3是一款强大的样式语言，可以实现各种惊人的效果，如动画。在本教程中，我们将学习如何创建不断动画的CSS3动画。

/* 创建一个循环动画 */
@keyframes rotate{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

/* 将动画应用于元素 */
.element{
    animation:rotate 2s linear infinite;
}

/* 解释：动画名称为“rotate”，持续时间为2秒，动画类型为线性，无限循环 */ 

在上面的代码中，我们首先创建了一个名为“rotate”的动画，将其应用到一个名为“element”的元素中。在这里，我们使用属性“animation”，它使我们能够指定动画名称、持续时间、动画类型和动画循环。

我们的动画还包括一个关键帧，它告诉浏览器在动画进行时应该发生什么。在这里，我们定义了一个由0到360度旋转的变换。该变换将循环往复，使我们的元素不断旋转。

通过这个简单的示例，你现在已经了解了如何创建不断动画的CSS3动画。无限循环旋转动画只是CSS3中可以创建的各种惊人动画之一。继续探索并发现你自己独特的创意！