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); }
}
css
css-animations
pengguna531192
sumber
sumber
Jawaban:
Kamu sedang mencari:
Info lebih lanjut tentang MDN dan daftar dukungan browser di canIuse .
sumber
-webkit-animation-fill-mode: forwards;
100% {}
atauto {}
mengatur, sehingga bahkan dengananimation-fill-mode: forwards;
animasi saya masih akan membuang saya0%
. (Saya menggunakan beberapa @untuk loop untuk membuat animasi saya dan lupa untuk secara manual menambahkan afrom{}
danto{}
);Jika Anda ingin menambahkan perilaku ini ke
animation
definisi properti singkatan , urutan sub-properti adalah sebagai berikutanimation-name
- defaultnone
animation-duration
- default0s
animation-timing-function
- defaultease
animation-delay
- default0s
animation-iteration-count
- default1
animation-direction
- defaultnormal
animation-fill-mode
- Anda perlu mengatur iniforwards
animation-play-state
- defaultrunning
Karenanya dalam kasus yang paling umum, hasilnya akan seperti ini
Lihat dokumentasi MDN di sini
sumber
Dukungan Browser
Pemakaian:-
sumber
Cara terbaik tampaknya menempatkan keadaan akhir di bagian utama css. Seperti di sini, saya menempatkan lebar
220px
, sehingga akhirnya menjadi220px
. Tapi mulai0px;
sumber
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?
sumber
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.
sumber
Tidak ada yang benar-benar membawanya, cara itu dibuat untuk bekerja adalah animasi-play-state diatur untuk berhenti.
sumber
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%.
sumber