How to animate conic-gradient so that it could change color smoothly?

Question

I was animating a conic gradient but the colour was not changing smoothly I have seen various articles but I was not able to replicate them properly You can find my code here:

    <style>

        body{
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pyramid {
          width: 500px;
          height: 500px;
          background-image: conic-gradient(red 135deg, green 135deg,yellow 165deg, yellow 165deg);
            clip-path: polygon(50% 50%, 0% 100%, 100% 100%);    
            animation: change 1s ease infinite;   
        }
        .pyramid:hover{
            background-image: conic-gradient(red 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg);
        }
        @keyframes change{
            0%{
            background-image: conic-gradient(red 135deg, yellow 135deg,yellow 165deg, lightpink 165deg);
            /*background: red;*/

            }
            50%{
                background-image: conic-gradient(red 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg);
            }
            100%{
            background-image: conic-gradient(red 135deg, #565644 135deg,#838314 165deg, #a68f03 165deg)
          }
        }

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

How to change it smoothly

Sorry dear, As I remember You can't animate background-image!!! The only way to animate it is to use javascript! — Saleh, Nov 10 '22 at 07:36
Even after changing background image I was not able to do it smoothly — pvs karthikeya, Nov 10 '22 at 07:48

score 1 · Accepted Answer · answered Nov 10 '22 at 07:46

background image isn't smoothly animatable in the way you want.

However, you can animate opacity smoothly and so one way to get the effect is to put two background images over one another and change their opacities so they gradually change from one to the other.

You can achieve this in your case by putting the background images on before and after pseudo elements rather than on the element itself.

They have the same animations but one starts part way through (when the opacity is 1).

It's quite difficult to appreciate that there is this sort of blending going on when the overall duration is only 1 second, so this snippet has increased the duration just as a demo so you can see the effect.

Of course change the timing to what you want.

The changes have also been made linear so that the overlaying always gives a 'whole' image rather than a semi transparent one.

<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>

Not exactly same as I want but it works for me thank you very much — pvs karthikeya, Nov 10 '22 at 07:57

How to animate conic-gradient so that it could change color smoothly?

1 Answers1