Menghentikan Animasi CSS3 pada frame terakhir

Saya memiliki animasi CSS3 bagian 4 yang diputar saat klik - tetapi bagian terakhir dari animasi dimaksudkan untuk melepasnya dari layar.

Namun, ia selalu kembali ke kondisi semula setelah dimainkan. Ada yang tahu bagaimana saya bisa menghentikannya pada frame css terakhirnya (100%) , atau cara menghilangkan seluruh div itu dalam sekali dimainkan.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Kamu sedang mencari:

animation-fill-mode: forwards;

Info lebih lanjut tentang MDN dan daftar dukungan browser di canIuse .

Jika Anda ingin menambahkan perilaku ini ke animationdefinisi properti singkatan , urutan sub-properti adalah sebagai berikut

animation-name- default none

animation-duration- default 0s

animation-timing-function- default ease

animation-delay- default 0s

animation-iteration-count- default 1

animation-direction- default normal

animation-fill-mode- Anda perlu mengatur ini forwards

animation-play-state- default running

Karenanya dalam kasus yang paling umum, hasilnya akan seperti ini

animation: colorchange 1s ease 0s 1 normal forwards;

Lihat dokumentasi MDN di sini

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

Dukungan Browser

• Chrome 43.0 (4.0 -webkit-)
• IE 10.0
• Mozilla 16.0 (5.0 -moz-)
• Shafari 4.0 -webkit-
• Opera 15.0 -webkit- (12.112.0 -o-)

Pemakaian:-

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Cara terbaik tampaknya menempatkan keadaan akhir di bagian utama css. Seperti di sini, saya menempatkan lebar 220px, sehingga akhirnya menjadi 220px. Tapi mulai0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

Bukan masalah Anda bahwa Anda mengatur webkitAnimationName kembali menjadi tidak ada sehingga mengatur ulang CSS untuk objek Anda kembali ke keadaan default itu. Tidakkah itu akan tetap seperti itu jika Anda hanya menghapus fungsi setTimeout yang mengatur ulang keadaan?

Saya baru saja mengirim jawaban yang serupa, dan Anda mungkin ingin melihat:

http://www.w3.org/TR/css3-animations/#animation-events-

Anda dapat mengetahui aspek-aspek dari animasi, seperti mulai dan berhenti, dan kemudian, sekali mengatakan acara 'berhenti' telah dipecat, Anda dapat melakukan apa pun yang Anda inginkan ke dom. Saya sudah mencoba ini beberapa waktu yang lalu, dan itu bisa berhasil, tetapi saya kira Anda akan dibatasi untuk webkit untuk saat ini (tetapi Anda mungkin sudah menerimanya). Btw, karena saya sudah memposting tautan yang sama untuk 2 jawaban, saya akan menawarkan saran umum ini: lihat W3C - mereka cukup banyak menulis aturan dan menjelaskan standar. Juga, halaman pengembangan webkit adalah kunci penting.

Tidak ada yang benar-benar membawanya, cara itu dibuat untuk bekerja adalah animasi-play-state diatur untuk berhenti.

Saya belajar hari ini bahwa ada batas yang ingin Anda gunakan untuk mode isi. Ini dari pengembang Apple. Rumornya * sekitar * enam, tetapi tidak pasti. Atau, Anda dapat mengatur status awal kelas Anda ke bagaimana Anda ingin animasi berakhir, kemudian * menginisialisasi * di dari / 0%.