Bagaimana Membuat Animasi CSS3 dalam WebKit Berkekalan Keadaan Akhir Mereka?

Webkit CSS Animation Mengekalkan Keadaan Akhir

Dalam animasi CSS3, anda boleh menghadapi isu di mana elemen animasi kembali kepada keadaan asalnya selepas animasi selesai. Ini boleh dikaitkan dengan fakta bahawa animasi ialah transformasi sementara yang digunakan pada elemen, dan apabila ia selesai, gaya asal elemen mengambil alih.

Walau bagaimanapun, terdapat penyelesaian yang membolehkan anda membuat kedudukan akhir " melekit." Menggunakan sifat -webkit-animation-fill-mode, anda boleh mengekalkan keadaan akhir animasi.

Sebagai contoh, pertimbangkan animasi CSS berikut:

<code class="css">.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
    -webkit-transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(100px);
  }

}</code>

Selepas animasi, elemen akan kembali ke kedudukan asalnya. Untuk mengelakkan ini, anda boleh menambah baris berikut pada CSS:

<code class="css">-webkit-animation-fill-mode: forwards;</code>

Dengan penambahan ini, elemen akan mengekalkan kedudukan terjemahannya (100px) walaupun selepas animasi selesai. Sifat ini telah diperkenalkan dalam WebKit dan disokong dalam iOS 4 dan Safari 5 dan lebih baru.

Atas ialah kandungan terperinci Bagaimana Membuat Animasi CSS3 dalam WebKit Berkekalan Keadaan Akhir Mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!