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; }
}

1
Saya akan memposting pemberitahuan berulang saya sendiri: stackoverflow.com/questions/9196694/css3-animation-scale Setidaknya saya memiliki judul yang lebih instruktif!
Dan

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;

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)

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;

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.