Bagaimana untuk mencapai peralihan warna yang lancar bagi animasi kecerunan tirus?

Question

Saya sedang menghidupkan kecerunan tirus, tetapi perubahan warna tidak cukup licin Saya telah melihat pelbagai artikel tetapi tidak dapat mengeluarkannya dengan betul Anda boleh mencari kod saya di sini:

<style>

        badan{
            ketinggian min: 100vj;
            paparan: flex;
            align-item: tengah;
            justify-content: pusat;
        }
        .pyramid {
          lebar: 500px;
          ketinggian: 500px;
          imej latar belakang: kecerunan kon (merah 135deg, hijau 135deg, kuning 165deg, kuning 165deg);
            laluan klip: poligon(50% 50%, 0% 100%, 100% 100%);
            animasi: tukar 1s memudahkan tak terhingga;
        }
        .pyramid:hover{
            imej latar belakang: kecerunan kon(merah 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg);
        }
        @keyframes tukar{
            0%{
            imej latar belakang: kecerunan kon (merah 135deg, kuning 135deg, kuning 165deg, merah jambu 165deg);
            /*latar belakang: merah;*/

            }
            50%{
                imej latar belakang: kecerunan kon(merah 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg);
            }
            100%{
            imej latar belakang: kecerunan kon(merah 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
          }
        }

    </style>
</head>
<badan>
<div class="piramid">
</div>
</body>

Cara membuat perubahan lebih lancar

Answer 1

Imej latar belakang tidak bernyawa dengan lancar seperti yang anda mahukan.

Walau bagaimanapun, anda boleh menganimasikan kelegapan dengan lancar, jadi satu cara untuk mendapatkan kesannya ialah dengan meletakkan dua imej latar belakang di atas satu sama lain dan menukar kelegapannya supaya ia bertukar secara beransur-ansur dari satu ke yang lain.

Dalam kes anda, anda boleh meletakkan imej latar belakang pada sebelum dan selepas elemen pseudo dan bukannya pada elemen itu sendiri.

Mereka mempunyai animasi yang sama, tetapi satu bermula di tengah (apabila kelegapan ialah 1).

Sukar untuk merealisasikan kesan pengadunan apabila jumlah tempoh hanya 1 saat, jadi coretan kod ini meningkatkan tempoh supaya anda dapat melihat kesannya.

Sudah tentu, anda boleh menukar masa mengikut keperluan.

Perubahan juga adalah linear supaya tindanan sentiasa memberikan imej "keseluruhan" dan bukannya imej separa lutsinar.

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