如何循环 CSS 动画？

Question

我正在学习如何在 CSS 中制作动画。我知道我可以将 iteration-count 属性设置为无限，它会无限期地运行，但我希望循环平滑。在关键帧中返回到 0% 后，动画不流畅并立即变为属性。如果有意义的话，我希望从 100% 到 0% 的过渡是平滑的。

这是我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Animations</title>
</head>
<body>
    <div id="shape"></div>
</body>
</html>

这是我的CSS

*
{
    margin:0px;
    padding:0px;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
#shape
{
    background-color: red;
    width:100px;
    height:100px;
    border-radius:50%;
    border:0px;
    animation-name:color-function;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
@keyframes color-function
{
    0%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
    25%
    {
        background-color: yellow;
        height:100px;
        border-radius: 50%;
    }
    50%
    {
        background-color: blue;
        height:100px;
        border-radius: 50%;
    }
    75%
    {
        background-color: green;
        height:100px;
        border-radius: 50%;
    }
    100%
    {
        background-color: red;
        height:150px;
        border-radius: 0%;
    }
}

谢谢

Answer 1

如果你想让过渡平滑，那么显然你应该让结尾等于开头。

那么，开头和结尾就没有区别了

我制作了您的 CSS 代码的我自己的版本来向您展示我将如何完成它。你应该修改它来制作你自己的版本。


@keyframes color-function
{
    0%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
    20%
    {
        background-color: yellow;
        height:100px;
        border-radius: 50%;
    }
    40%
    {
        background-color: blue;
        height:100px;
        border-radius: 50%;
    }
    60%
    {
        background-color: green;
        height:100px;
        border-radius: 50%;
    }
    80%
    {
        background-color: red;
        height:150px;
        border-radius: 0%;
    }
    100%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
}

Answer 2

我会告诉你什么。我会为您省去学习 JavaScript 的麻烦，并且只会给您解决问题的代码。

首先，您必须更改原始 HTML 代码以调用 JavaScript 文件：

<body>

    <div id="shape"></div>

<script src="./myScripts.js" type="text/javascript"></script>

</body>

接下来，您必须使用一个普通的旧文本文件（我们称之为 AAA.txt）并将该文本文件放在您的 style.css 文件旁边。

在文本文件中，粘贴以下文本：

document.head.insertAdjacentHTML("beforeend", " <style> " + 
  " #shape { background-color: red; width:100px; height:100px; border-radius:50%; } " + 
  " #shape { border:0px; animation-name:color-function; animation-duration: 5s; } " +
  " #shape { animation-timing-function: linear; animation-iteration-count: infinite; } " +
  " #shape { animation-fill-mode: forwards; } " +
  " @keyframes color-function { " +
  " 0% { background-color: red; height:100px; border-radius: 50%; } " +
  " 20% { background-color: yellow; height:100px; border-radius: 50%; } " +
  " 40% { background-color: blue; height:100px; border-radius: 50%; } " +
  " 60% { background-color: green; height:100px; border-radius: 50%; } " +
  " 80% { background-color: red; height:150px; border-radius: 0%; } " +
  " 100% { background-color: red; height:100px; border-radius: 50%; } } " +
  " </style>" ) ;

如您所见，这实际上不是您创建的文本文件，而是一个 JavaScript 文件。因此，将文件从 AAA.txt 重命名为 myScripts.js

其他一切都将保持不变。您将使用原始 style.css 文件，完全不做任何更改。您可以运行您的（修改过的）html 文件，就像您习惯做的那样，一切都应该像您希望的那样工作。

顺便说一下，在阅读了 JavaScript 代码之后，你能看出 CSS 为什么张着嘴站在那里吗？

如何循环 CSS 动画？

How to loop through a CSS Animation?

html

css

web-frontend

css-animations

web-animations