如何用CSS制作动画？

介绍

今天我将告诉你如何制作动画。我们将在这篇文章中看到所有必要的动画属性。你可以在我的github上获取代码。那么让我们开始吧！！

动画片

动画是用来增强网站外观的属性。它可以给用户带来很好的干扰，也可以用来向人们展示网站的目标。

基本动画

第一个动画：改变正方形的颜色

<div id="square">Square</div>

这里我制作了一个蓝色的正方形，然后给它一些样式。任何颜色都可以！

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

现在我们将制作一个动画。

第1步：制作动画@keyframes

要制作动画，您需要设置@keyframes。它保存您想要在某个时间赋予元素的样式，然后您需要为其指定名称。我的情况是我正在改变方块的颜色。所以，我给它起了一个名字：颜色。现在，您可以用两种类型编写@keyframes，例如

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

如果你想执行一个有两个步骤的动画，你可以使用 to 和 from 。或者您可以使用百分比值来完成，例如

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

当您必须在动画中执行多个任务时使用百分比值，但您可以同时使用两者！我通常使用百分比值来制作动画

第2步：设置方块的动画属性。

现在，我们将对广场上的属性进行动画处理。为此，您需要了解动画的属性。我会告诉你那些最常用的：

• animation-name - 用于告诉浏览器您要使用哪个@keyframes。就我而言，我的 @keyframes 名称是 color。

• animation-duration - 用于告诉动画应该在多长时间内完成。

• animation-iteration-count - 用于告诉应该执行多少次。

您可以在 w3school 或任何其他网站上了解有关动画的更多信息。现在，我们将使用动画属性，但我们将其写在一行中，如下所示：

    animation: color 4s infinite;

CSS中的动画有7个属性。为了在单行中使用动画属性，我首先编写动画名称（颜色），然后编写动画持续时间（在我的例子中为 4 秒），然后将动画迭代计数设置为无限。如果只想使用一次动画，可以将其设置为 1 。您还可以自行设置动画属性的值。

现在，如果你看到你的方块，它会一次又一次地改变颜色！现在，我们将使其移动，同时改变颜色。

第二个动画：移动方块并改变颜色！

为此，我将使用同一个方块，并为此制作另一个@keyframes。我们将使用与之前相同的步骤

第1步：制作动画@keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

在这里，我创建了一个名为 move 的 @keyframes，并为此动画使用了三个步骤。首先，我将左侧设置为 0px 和背景颜色。然后在 50% 时，我将 left 设置为 300px 并更改背景颜色，最后，我再次将 left 设置为 0px，这样它就会出现在第一个位置。

第2步：设置方块的动画属性

    animation: move 4s infinite;

在这里，我将animation-name设置为move，然后animation-duration设置为4s，animation-iteration-count设置为无限。您可以再次根据您的选择设置动画值。并且不要忘记注释第一个动画属性，否则可能会出错！

结论

由于帖子已经太长了，所以我们将在另一篇帖子中继续。就目前而言，今天就足够了。我希望你能理解。我尽力讲述关于动画的所有事情。并在评论中告诉我下一篇文章应该写什么主题。感谢您的阅读！

以上是如何用CSS制作动画？的详细内容。更多信息请关注PHP中文网其他相关文章！