Properti Animasi CSS tetap ada setelah animasi

93

Saya mencoba untuk membuat properti animasi CSS tetap ada setelah menyelesaikan, apakah ini mungkin?

Inilah yang saya coba capai ...

Elemen harus disembunyikan saat pengguna membuka halaman, setelah 3 detik (atau apa pun), elemen tersebut akan menghilang dan setelah animasi selesai, elemen tersebut akan tetap berada di sana.

Ini adalah percobaan biola ... http://jsfiddle.net/GZx6F/

Ini kode untuk pelestarian ...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

Saya tahu bagaimana melakukan ini dengan jQuery .. akan seperti ini ...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>
css css-animations SparrwHawk
sumber
Apakah w3sekolah sudah ketinggalan zaman? Dikatakan Chrome dan FireFox hanya mendukung alternatif.
iambriansreed
5
@iambriansreed: Saya selalu menganggap :)
BoltClock
4
@iambriansreed bahkan tidak mengklik hasil pencarian w3schools. Jika Anda tidak sengaja melakukannya, lihatlah dari monitor Anda dan tekan tombol kembali pada mouse Anda.
doug65536

Jawaban:

166

Saya pikir Anda sedang mencari animation-fill-modeproperti CSS3

https://developer.mozilla.org/en/CSS/animation-fill-mode

Properti CSS mode-isi-animasi menentukan bagaimana animasi CSS harus menerapkan gaya ke targetnya sebelum dan sesudah dieksekusi.

untuk tujuan Anda coba atur saja

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Menetapkan nilai ke depan «target akan mempertahankan nilai yang dihitung yang ditetapkan oleh keyframe terakhir yang ditemukan selama eksekusi»

Fabrizio Calderan
sumber
1
Terima kasih Fabrizio, itu bagus, saya akan menerima jawaban itu. Hanya satu hal aneh yang terjadi sehingga saya bertanya-tanya apakah Anda tahu sesuatu tentang - di iOS (belum menguji apa pun), hitungan mundur ke kemudahan-dalam dijeda setiap kali saya menggulir, misalnya jika saya langsung mulai menggulir saat halaman dimuat itu tidak memudar masuk Tapi ketika saya BERHENTI menggulir 3s mulai menghitung mundur. Apakah ini hanya perilaku iOS default? Terima kasih
SparrwHawk
Solusi yang luar biasa.
Lalnuntluanga Chhakchhuak
Apakah ini tersedia dalam animasi SVG mentah?
Justin
16

Selain jawaban dari @Fabrizio Calderan , itu harus mengatakan bahwa Anda bahkan dapat menerapkan animation-fill-modeproperti forwardslangsung ke animation. Jadi yang berikut ini juga harus berfungsi:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>
Luaskan cuplikan

yckart
sumber
1

Cara menganimasikan elemen dan membuatnya tetap seperti animasi selesai:

// Beggin
#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}
<div id="box"></div>
Luaskan cuplikan

codeWithMe
sumber
0

Saya mengalami hal serupa terjadi pada saya. Saya menambahkan posisi: relatif terhadap elemen yang dianimasikan dan yang memperbaikinya untuk saya.

tyau
sumber