为什么我的动画的颜色变化会有轻微的延迟？答案

【问题标题】：Why is there a slight delay in the color change in my animation?为什么我的动画的颜色变化会有轻微的延迟？
【发布时间】：2021-08-20 22:33:15
【问题描述】：

如果您密切注意动画，您会注意到颜色过渡有轻微的停顿，我想要一些更平滑的东西。我目前正在起步，我发现很难弄清楚为什么会这样。有人可以帮我解决这个问题并提供可能的解决方法吗？

            .intro {
                font-family: 'Playfair Display';
                font-size: 49px;
                color: rgb(255, 255, 255);
                line-height: 0.9;
                margin-top: 260px;
                margin-left: 30px;

            }
            #intro-text {
                animation-name: changeColor;
                animation-duration: 5s;
                animation-timing-function: ease-in;
                animation-delay: 0s; 
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                cursor: default;
                transition: color 0.7s ease-in-out;
            }

            @keyframes changeColor{
            0% {
                color: rgb(255, 255, 255);
                opacity: 0.2;
            }

            25% {
                color: rgb(150, 131, 131);
                opacity: 0.4;
            }

            50% {
                color: rgb(140, 131, 131);
                opacity: 0.6;
            }

            75% {
                color: rgb(130, 121, 121,);
                opacity: 0.8;
            }

            100% {
                color: rgb(100, 091, 091);
                opacity: 1;
            }
            }

    <!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="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;      0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
        <link rel="shortcut icon" href="favicon2.png" type="image/x-icon">
        <title>Why</title>
        </head>
    <body>
        <div class="body">
            <div class="intro">
                <span id="intro-text">Hello! I'm an AI.</span><br>
            </div>
        </div>
    </body>
    </html>

【问题讨论】：

标签： html css-animations

【解决方案1】：

轻微的停顿是由于 25%、50% 和 75% 的关键帧选择器造成的。只保留 0% 和 100% 选择器将产生平滑的动画。

            .intro {
                font-family: 'Playfair Display';
                font-size: 49px;
                color: rgb(255, 255, 255);
                line-height: 0.9;
                margin-top: 260px;
                margin-left: 30px;

            }
            #intro-text {
                animation-name: changeColor;
                animation-duration: 5s;
                animation-timing-function: ease-in;
                animation-delay: 0s; 
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                cursor: default;
                transition: color 0.7s ease-in-out;
            }

            @keyframes changeColor{
            0% {
                color: rgb(255, 255, 255);
                opacity: 0.2;
            }

            100% {
                color: rgb(100, 091, 091);
                opacity: 1;
            }
            }

    <!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="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;      0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
        <link rel="shortcut icon" href="favicon2.png" type="image/x-icon">
        <title>Why</title>
        </head>
    <body>
        <div class="body">
            <div class="intro">
                <span id="intro-text">Hello! I'm an AI.</span><br>
            </div>
        </div>
    </body>
    </html>

【讨论】：

【解决方案2】：

.center {
      
      margin: 0 auto;
      
    }

    .awesome {
      
      font-family: futura;
      font-style: italic;
      
      width:100%;
      
      margin: 0 auto;
      text-align: center;
      
      color:#313131;
      font-size:45px;
      font-weight: bold;
      position: absolute;
      -webkit-animation:colorchange 20s infinite alternate;
      
      
    }

    @-webkit-keyframes colorchange {
      0% {
        
      color: rgb(255, 255, 255);
       opacity: 0.2;

      }
      
      10% {
        
        color: #8e44ad;
      }
      
      20% {
        
        color: #1abc9c;
      }
      
      30% {
        
        color: #d35400;
      }
      
      40% {
        
        color: blue;
      }
      
      50% {
        
        color: #34495e;
      }
      
      60% {
        
        color: blue;
      }
      
      70% {
        
        color: #2980b9;
      }
      80% {
     
        color: #f1c40f;
      }
      
      90% {
     
        color: #2980b9;
      }
      
      100% {
        
        color: pink;
      }
    }

<div class='center'>

  <p class="awesome">Hello! I'm an AI.</p>

</div>

【讨论】：

【解决方案3】：

将计时功能设置为ease-in-out 时，动画在开始和结束时运行缓慢。为了加快初始阶段 (0%)，您可以从 0.4（或更高）开始设置不透明度。

【讨论】：