Mempertahankan status akhir di akhir animasi CSS3

301

Saya menjalankan animasi pada beberapa elemen yang diatur opacity: 0;dalam CSS. Kelas animasi diterapkan onClick, dan, menggunakan keyframes, itu mengubah opacity dari 0ke 1(antara lain).

Sayangnya, ketika animasi selesai, elemen kembali ke opacity: 0(di Firefox dan Chrome). Pemikiran alami saya adalah bahwa elemen animasi mempertahankan keadaan akhir, mengesampingkan sifat asli mereka. Apakah ini tidak benar? Dan jika tidak, bagaimana saya bisa mendapatkan elemen untuk melakukannya?

Kode (versi awalan tidak termasuk):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}
css css-animations Dan
sumber
1
Saya akan memposting pemberitahuan berulang saya sendiri: stackoverflow.com/questions/9196694/css3-animation-scale Setidaknya saya memiliki judul yang lebih instruktif!
Dan
duplikat dari CSS3 Animate: Bagaimana agar objek tidak kembali ke posisi semula setelah animasi berjalan?
Michael Mullany

Jawaban:

528

Coba tambahkan animation-fill-mode: forwards;. Misalnya seperti ini:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
Christofer Vilander
sumber
1
Ya itu saja. Akan memeriksa jawaban Anda ketika saya bisa. Jika ada kepala CSS yang ingin mengomentari logika di balik keharusan itu, saya ingin tahu!
Dan
8
Anda dapat membaca tentang properti mode isi-animasi di sini - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Semoga bermanfaat!
Christofer Vilander
6
@Dan forwardsnilai animation-fill-modeproperti memastikan elemen akan menahan keadaan keyframe animasi terakhir setelah animasi berakhir. misalnya jika animasi Anda berubah widthdari 0 ke 100px, properti ini memastikan elemen tetap 100px lebar setelah animasi berakhir.
Farzad YZ
5
jangan lupa untuk menentukan 100% / totitik @keyframejika tidak, itu tidak akan berhasil.
Tomasz Mularczyk
animation-fill-mode: ke depan juga melakukan trik untuk saya, tetapi hanya setelah menambahkan perintah '! Penting' pada aturan
shayuna
26

Jika Anda menggunakan lebih banyak atribut animasi, tulisan singkatnya adalah:

animation: bubble 2s linear 0.5s 1 normal forwards;

Ini memberi:

  • 2s durasi
  • linear fungsi waktu
  • 0.5s menunda
  • 1 iteration-count (bisa tak terbatas)
  • normal arah
  • forwards mode isi (atur mundur jika Anda ingin memiliki kompatibilitas untuk menggunakan posisi akhir sebagai keadaan akhir)
agiopnl
sumber
14

JIKA TIDAK MENGGUNAKAN VERSI TANGAN SINGKAT: Pastikan animation-fill-mode: forwardsadalah SETELAH deklarasi animasi atau tidak akan berfungsi ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs.

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Taylor A. Leach
sumber
1
Kamu benar. Memperbarui jawaban saya. Terima kasih, itu menyelinap di pikiranku haha.
Taylor A. Leach
4

Gunakan mode animasi-isi: ke depan;

animation-fill-mode: forwards;

Elemen akan mempertahankan nilai style yang diatur oleh keyframe terakhir (tergantung pada animasi-arah dan animasi-iterasi-hitung).

Catatan: Aturan @keyframes tidak didukung di Internet Explorer 9 dan versi yang lebih lama.

Contoh kerja

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
Luaskan cuplikan

Deepu Reghunath
sumber