2

我正在学习如何在 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%;
    }
}

谢谢

4

2 回答 2

1

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

然后，开始和结束之间没有区别。

我制作了自己的 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%;
    }
}
于 2021-03-08T05:48:18.260 回答
1

我会告诉你什么。我将为您省去学习 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 会张着嘴站在那里吗？

于 2021-03-08T11:06:39.743 回答