Wie erreicht man einen reibungslosen Farbübergang einer konischen Verlaufsanimation?

Question

Ich animiere einen spitz zulaufenden Farbverlauf, aber der Farbwechsel ist nicht sanft genug Ich habe mir verschiedene Artikel angesehen, kann sie aber nicht richtig wiedergeben Meinen Code finden Sie hier:

<style>

        Körper{
            Mindesthöhe: 100 Vh;
            Anzeige: Flex;
            align-items: center;
            rechtfertigen-Inhalt: Mitte;
        }
        .pyramide {
          Breite: 500px;
          Höhe: 500px;
          Hintergrundbild: konischer Farbverlauf (Rot 135 Grad, Grün 135 Grad, Gelb 165 Grad, Gelb 165 Grad);
            Clip-Pfad: Polygon (50 % 50 %, 0 % 100 %, 100 % 100 %);
            Animation: Änderung 1s Leichtigkeit unendlich;
        }
        .pyramid:hover{
            Hintergrundbild: konischer Farbverlauf (rot 135 Grad, #cadfca 135 Grad, #dddd3f 165 Grad, #aeae30 165 Grad);
        }
        @keyframes ändern{
            0 %{
            Hintergrundbild: konischer Farbverlauf (Rot 135 Grad, Gelb 135 Grad, Gelb 165 Grad, Hellrosa 165 Grad);
            /*Hintergrund: rot;*/

            }
            50 %{
                Hintergrundbild: konischer Farbverlauf (rot 135 Grad, #cadfca 135 Grad, #dddd3f 165 Grad, #aeae30 165 Grad);
            }
            100%{
            Hintergrundbild: konischer Farbverlauf (rot 135 Grad, #565644 135 Grad, #838314 165 Grad, #a68f03 165 Grad)
          }
        }

    </style>
</head>
<Körper>
<div class="pyramid">
</div>
</body>

So lassen sich die Änderungen reibungsloser gestalten

Answer 1

背景图像在您想要的方式中无法平滑地进行动画处理。

然而，您可以平滑地动画化不透明度，因此一种获得效果的方法是将两个背景图像放在彼此上方，并改变它们的不透明度，使它们逐渐从一个变为另一个。

在您的情况下，您可以将背景图像放在伪元素的before和after上，而不是放在元素本身上。

它们具有相同的动画效果，但一个从中间开始（当不透明度为1时）。

当总持续时间只有1秒时，很难意识到这种混合效果，因此此代码片段增加了持续时间，以便您可以看到效果。

当然，您可以根据需要更改时序。

更改还是线性的，以便覆盖始终提供“整体”图像而不是半透明图像。

<style>
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .pyramid {
    width: 500px;
    height: 500px;
    clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
    position: relative;
  }
  
  .pyramid::before,
  .pyramid::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    --duration: 10s; /* set the duration to whatever you want */
    animation: change var(--duration) linear infinite forwards;
    opacity: 0;
  }
  
  .pyramid::after {
    animation-delay: calc(var(--duration) / -6);
  }
  
  @keyframes change {
    0% {
      background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg);
      opacity: 0;
    }
    16.666% {
      opacity: 1;
      background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg);
    }
    32% {
      opacity: 0;
      background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg);
    }
    33.333% {
      background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg);
      opacity: 0;
    }
    50% {
      opacity: 1;
      background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg);
    }
    65% {
      opacity: 0;
      background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg);
    }
    66.666% {
      opacity: 0;
      background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
    }
    83.333% {
      opacity: 1;
      background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
    }
    99%,
    100% {
      opacity: 0;
      background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
    }
  }
  
  @keyframes change2 {
    0% {
      background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg);
      /*background: red;*/
    }
    0% {
      background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg);
    }
    50% {
      background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
    }
  }
</style>
</head>

<body>
  <div class="pyramid">
  </div>
</body>