Bagaimanakah Saya Boleh Mencipta Animasi Gradien CSS Lancar Tanpa Perubahan Kedudukan Tiba-tiba?

Menghidupkan Kecerunan Menggunakan CSS

Senario tertentu boleh menimbulkan kesukaran untuk mencapai animasi kecerunan yang lancar. Satu isu yang ketara ialah perubahan kedudukan yang mendadak semasa animasi. Kod yang disediakan menunjukkan masalah ini:

.animated {
  animation: gra 5s infinite;
  animation-direction: reverse;
}

@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%);
  }
}

Penyelesaian

Untuk menyelesaikan isu ini, anda boleh menggunakan sifat kedudukan latar belakang CSS bersama-sama dengan bingkai utama untuk mencipta lebih lancar animasi. Pertimbangkan kod berikut:

#gradient
{
    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 ini:

• Sifat bersaiz latar belakang memastikan gelung lancar kecerunan.
• Sifat kedudukan latar belakang mengawal kedudukan permulaan kecerunan.
• Kerangka utama menghidupkan sifat kedudukan latar belakang, mencipta ilusi pergerakan kecerunan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Animasi Gradien CSS Lancar Tanpa Perubahan Kedudukan Tiba-tiba?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!