Beranda>Tutorial Desain Web>Tutorial CSS

Bagaimana menjaga keadaan akhir animasi CSS3 tidak berubah

Penulis：Eve Cole Waktu Pembaruan：2024-12-23 17:12:44

perkenalan

Animasi CSS3 menghadirkan efek dinamis yang kaya pada desain web, menjadikan halaman lebih hidup dan menarik. Namun, terkadang kita ingin animasi tetap berada pada kondisi akhir saat berakhir, dibandingkan kembali ke kondisi awal. Artikel ini akan memperkenalkan beberapa cara untuk mencapai efek ini dan memastikan bahwa animasi mempertahankan keadaan ini di akhir aksi.

Metode 1: Gunakan atribut animation-fill-mode

Properti animation-fill-mode digunakan untuk mengontrol gaya animasi sebelum dan sesudah diputar. Dengan mengatur properti ini, Anda dapat mencapai efek mempertahankan keadaan akhir saat animasi berakhir.

nilai atribut

none : Nilai default, animasi tidak menerapkan gaya apa pun sebelum dan sesudah diputar. forwards : Mempertahankan keadaan akhir setelah animasi berakhir. backwards : Animasi menerapkan keadaan awal sebelum diputar. both : Menggabungkan forwards dan backwards , animasi menerapkan keadaan awal sebelum diputar dan mempertahankan keadaan akhir setelah diputar.

Contoh

 .elemen {
  animasi: kemudahan masuk-keluar myAnimation 2;
  mode pengisian animasi: maju;
}
@keyframes animasi saya {
  0% {
    transformasi: terjemahkanX(0);
  }
  100% {
    transformasi: TranslateX(100px);
  }
}

Dalam contoh ini, elemen .element akan tetap dalam status transform: translateX(100px) setelah animasi berakhir.

Metode 2: Gunakan acara animationend

Dengan mendengarkan acara animationend melalui JavaScript, Anda dapat mengatur gaya elemen secara manual saat animasi berakhir, sehingga mempertahankan status akhir animasi.

Contoh

 <div kelas="elemen"></div>
 .elemen {
  lebar: 100 piksel;
  tinggi: 100 piksel;
  warna latar: merah;
  animasi: kemudahan masuk-keluar myAnimation 2;
}
@keyframes animasi saya {
  0% {
    transformasi: terjemahkanX(0);
  }
  100% {
    transformasi: TranslateX(100px);
  }
}
 elemen const = dokumen.querySelector('.element');
elemen.addEventListener('animationend', () => {
  element.style.transform = 'translateX(100px)';
});

Dalam contoh ini, saat animasi berakhir, kode JavaScript menyetel properti transform elemen menjadi translateX(100px) , sehingga mempertahankan status akhir animasi.

Metode 3: Gunakan atribut transition

Meskipun properti transition terutama digunakan untuk efek transisi, dengan menggunakannya secara cerdik, Anda juga dapat mencapai efek mempertahankan keadaan akhir saat animasi berakhir.

Contoh

 <div kelas="elemen"></div>
 .elemen {
  lebar: 100 piksel;
  tinggi: 100 piksel;
  warna latar: merah;
  transisi: transformasi kemudahan masuk-keluar;
}
.elemen.animate {
  transformasi: TranslateX(100px);
}
 elemen const = dokumen.querySelector('.element');
elemen.classList.add('animate');

Dalam contoh ini, dengan menambahkan kelas animate , properti transform elemen bertransisi dari keadaan awalnya ke translateX(100px) dan tetap dalam keadaan tersebut setelah transisi berakhir.

Meringkaskan

Menjaga keadaan akhir animasi CSS3 tidak berubah dapat dicapai dengan berbagai cara, termasuk menggunakan properti animation-fill-mode , mendengarkan event animationend , dan menggunakan properti transition . Setiap metode memiliki skenario yang dapat diterapkan, dan pengembang dapat memilih metode yang sesuai dengan kebutuhan spesifik.

Atribut animation-fill-mode : cocok untuk animasi CSS murni, dengan menyetel nilai forwards untuk mempertahankan status akhir animasi. acara animationend : cocok untuk adegan yang memerlukan interaksi JavaScript, dan mengatur gaya secara manual dengan mendengarkan acara. atribut transition : cocok untuk efek transisi, dengan menambahkan kelas untuk mempertahankan keadaan akhir animasi.

Saya harap artikel ini dapat memberi Anda pemahaman yang jelas dan panduan praktis untuk membantu Anda menerapkan animasi CSS3 dengan lebih baik dalam pengembangan aktual dan mencapai efek dinamis yang diperlukan.

Ini menyimpulkan artikel tentang cara menjaga keadaan akhir animasi CSS3 tidak berubah. Untuk informasi lebih lanjut tentang menjaga keadaan akhir animasi CSS3 tidak berubah, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah lakukan itu di masa mendatang.

Artikel Terkait