Menghentikan Animasi CSS3 pada frame terakhir

181

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
Hai Nick, bisakah kamu memposting css dan html yang kamu gunakan?
Sebastian Patane Masuelli
Halo Sebastian, saya telah memperbarui pertanyaan saya dengan css dan javascript. Satu-satunya html yang saya gunakan adalah div dengan onclick untuk memulai fungsi rotate.
user531192
kemungkinan duplikat dari Tidak dapat menghentikan animasi di akhir satu siklus
MPelletier

Jawaban:

376

Kamu sedang mencari:

animation-fill-mode: forwards;

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

metode tindakan
sumber
8
Apakah Anda tahu jika itu berfungsi di chrome? Tidak beruntung dengan itu
user531192
4
Terima ini sebagai jawaban yang benar. Penjelasan lebih lanjut tentang ini: 4waisenkinder.de/blog/2014/10/13/…
miron
@ user531192 Untuk browser Chrome / Webkit yang harus Anda gunakan -webkit-animation-fill-mode: forwards;
eivindml
Chrome tidak memerlukan awalan -webkit- lagi sekarang (setidaknya dari v49)
Capsule
1
Satu masalah yang saya miliki dengan ini adalah saya tidak memiliki 100% {}atau to {}mengatur, sehingga bahkan dengan animation-fill-mode: forwards;animasi saya masih akan membuang saya 0%. (Saya menggunakan beberapa @untuk loop untuk membuat animasi saya dan lupa untuk secara manual menambahkan a from{}dan to{});
Phil Tune
25

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

davnicwil
sumber
19 
-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;
  }
}
Hitesh Sahu
sumber
5

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;}
}
Optimus prime
sumber
Ini bagus, menurut saya cara terbaik untuk mengatasi masalah ini.
Drew Baker
Jika Anda menggunakan penundaan animasi, dimulai dengan kondisi akhir, reset ke 0%, kemudian animasikan menjadi 100%. Tidak ideal dan secara visual menggelegar.
Deborah
3

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?

pacar00
sumber
1

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.

Jesse
sumber
0

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

Marco
sumber
-2

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%.

iheartflex
sumber