Bagaimana untuk Mencapai Animasi Gradien Lancar dalam CSS?

Melaksanakan Animasi Kecerunan Lancar dengan CSS

Soalan: Animasi Kecerunan Tidak Semulajadi

Dalam bidang kecerunan CSS, terdapat cabaran lama yang melanda banyak pembangun—pergerakan kecerunan secara tiba-tiba semasa animasi. Kesan menggelegar ini timbul apabila kecerunan secara tiba-tiba menukar kedudukannya pada setiap langkah animasi.

Pertimbangkan contoh berikut:

@keyframes gra {
  0% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
  }
  50% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
  }
  100% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
  }
}

Dalam kod ini, kedudukan kecerunan beralih secara tiba-tiba antara tiga bingkai, mengakibatkan animasi tersentak. Matlamatnya adalah untuk mencapai peralihan yang lancar dan lancar, mencerminkan aliran semula jadi bagi perkembangan warna.

Jawapan: Penguasaan Animasi Kecerunan

Untuk membuka kunci rahsia animasi kecerunan lancar, kami memperkenalkan pendekatan berbeza . Daripada mengubah suai kedudukan kecerunan secara langsung, kami mengalihkan saiznya. Perubahan halus ini membawa kepada peningkatan yang ketara dalam kelancaran animasi:

#gradient {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  font-size: 30px;
  background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
  background-size: 200% 200%;

  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}
@-moz-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}
@keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

Dalam kod yang dipertingkat ini, kami kini memanipulasi sifat bersaiz latar belakang. Animasi bermula dengan saiz kecerunan kecil, secara beransur-ansur meningkatkannya sehingga kecerunan meliputi keseluruhan elemen. Ini menghasilkan kesan apabila warna kelihatan mengalir dengan lancar merentasi elemen.

Dengan menggunakan teknik ini, kami telah mencapai animasi kecerunan yang anggun dan menawan, menghidupkan reka bentuk anda dengan sentuhan keanggunan dan gerakan.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Animasi Gradien Lancar dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!