Hai, saya sedang melakukan tes pada brosur virtual dan animasi dimuat ulang saat memindahkan halaman, saya ingin setelah dimuat mereka tetap statis. Saya mengekspor pengguliran horizontal untuk navigasi lateral. Saya mencoba menyalin kode yang dikutip di sini tetapi tidak berfungsi lebih baik

Ini tautan untuk pengujian saya dengan kode.  

Berikut link tanpa kode

Properti animation-fill-mode_ menentukan gaya untuk elemen saat animasi tidak diputar (sebelum dimulai, setelah diakhiri, atau keduanya)

Animasi CSS tidak memengaruhi elemen sebelum keyframe pertama diputar atau setelah keyframe terakhir diputar. Properti animation-fill-mode_ dapat mengesampingkan perilaku ini

Nilai default. noneInherited. noAnimatable. Tidak. Baca tentang animatableVersion. Sintaks CSS3JavaScript. obyek. gaya. animationFillMode="maju" Cobalah

---

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti

Angka diikuti dengan -webkit-, -moz-, atau -o- tentukan versi pertama yang berfungsi dengan awalan

Propertyanimation-fill-mode43. 0
4. 0 -webkit-10. 016. 0
5. 0 -moz-9. 0
4. 0 -webkit-30. 0
15. 0 -webkit-
12. 1
12. 0 -o-

---

---

Sintaks CSS

mode-pengisian-animasi. tidak ada. ke depan. ke belakang. keduanya. awal. mewarisi;

Nilai properti

ValueDescriptionnoneNilai default. Animasi tidak akan menerapkan gaya apa pun ke elemen sebelum atau sesudah dieksekusimajuElemen akan mempertahankan nilai gaya yang ditetapkan oleh bingkai kunci terakhir (bergantung pada arah animasi dan jumlah iterasi animasi) mundurElemen akan mendapatkan nilai gaya yaitu . Baca tentang initialinheritInherits properti ini dari elemen induknya. Baca tentang mewarisi

Nilai default. 1 Diwariskan. noAnimatable. Tidak. Baca tentang animatableVersion. Sintaks CSS3JavaScript. obyek. gaya. animationIterationCount="infinite" Cobalah

---

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti

Angka diikuti dengan -webkit-, -moz-, atau -o- tentukan versi pertama yang berfungsi dengan awalan

Propertyanimation-iteration-count43. 0
4. 0 -webkit-10. 016. 0
5. 0 -moz-9. 0
4. 0 -webkit-30. 0
15. 0 -webkit-
12. 0 -o-

---

---

Sintaks CSS

animasi-iterasi-jumlah. nomor. tak terbatas. awal. mewarisi;

Nilai properti

ValueDescriptionDemonumberAngka yang menentukan berapa kali animasi harus diputar. Nilai defaultnya adalah 1 Play it »infinite Menentukan bahwa animasi harus diputar berkali-kali (selamanya)Play it »initialMengatur properti ini ke nilai defaultnya. Baca tentang initialinheritInherits properti ini dari elemen induknya. Baca tentang mewarisi

Kemudian karena alasan tertentu Anda ingin menjalankan animasi itu lagi, mungkin dengan sekali klik. Anda mungkin berpikir CSS menyediakan cara untuk memulai lagi, tetapi sejauh yang saya tahu tidak. Anda bahkan dapat mencoba menghapus dan menambahkan kembali nama kelas itu melalui JavaScript (jQuery)

$("#logo").click(function() {
  // not gonna work
  $(this).removeClass("run-animation").addClass("run-animation");
});

Jika Anda menunda sedikit antara menghapus dan menambahkan kembali kelas (mis. g. setTimeout()), itu akan berhasil, tapi saya pikir itu tidak ideal. Yang benar-benar perlu Anda lakukan adalah menghapus seluruh elemen dari halaman dan memasukkannya kembali. Sebagai demo cepat dengan jQuery, kami akan mengkloningnya, menyisipkannya tepat setelahnya, lalu menghapus yang asli

$("#logo").click(function() {	
	      	      
 var el     = $(this),  
     newone = el.clone(true);
           
 el.before(newone);
        
 $("." + el.attr("class") + ":last").remove();

});

_

atau dasar-dasar hanya dengan JavaScript

const el = this;
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);

Lihat Demo

Masalah yang sama ini ada untuk semua jenis acara. Katakanlah Anda memiliki animasi yang ingin segera dijalankan, tetapi sekali lagi pada

  Fancy Logo

0. Masalah yang sama, itu tidak akan berjalan lagi. Oli Studholme memiliki beberapa penelitian menarik mengenai hal ini. Salah satu cara mengatasinya adalah dengan memiliki dua animasi yang persis sama kecuali namanya, lalu Anda dapat mengganti mana yang Anda gunakan untuk acara

  Fancy Logo

0 (atau apa pun) dan itu akan berhasil

img        {animation: spin-cat-1 2s;}
img:active {animation: spin-cat-2 2s;}
@keyframes spin-cat-1 {50%{transform:rotateY(180deg);}}
@keyframes spin-cat-2 {50%{transform:rotateY(180deg);}}

Lihat Demo

Praprosesor CSS dapat membantu mempermudah pemeliharaan dengan mengimpor potongan kode sehingga Anda hanya perlu memeliharanya di satu tempat, tetapi pada akhirnya itu membengkak. Sayangnya, Anda juga tidak dapat menentukan beberapa nama animasi keyframe dalam satu deklarasi, yang juga akan berguna (dan tidak hanya untuk ini, pikirkan animasi yang lebih kompleks di mana Anda dapat menulis ulang hanya keyframe tertentu di atas animasi keyframe dasar)

Oli juga bermain dengan berbagai teknik lain untuk membuatnya bekerja, seperti mengubah durasi, penundaan, dan iterasi alih-alih mengubah nama, tetapi menurut saya, semua itu lebih buruk daripada mengubah nama.

Memperbarui. Metode JavaScript lain untuk Memulai Ulang Animasi CSS

Picu reflow di antara menghapus dan menambahkan nama kelas. Sebagai contoh

// retrieve the element
element = document.getElementById("logo");

// reset the transition by...
element.addEventListener("click", function(e) {
  e.preventDefault;
  
  // -> removing the class
  element.classList.remove("run-animation");
  
  // -> triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
  // Oops! This won't work in strict mode. Thanks Felis Phasma!
  // element.offsetWidth = element.offsetWidth;
  // Do this instead:
  void element.offsetWidth;
  
  // -> and re-adding the class
  element.classList.add("run-animation");
}, false);

_

CodePen Embed Fallback

JavaScript lainnya

Sebagai catatan, Anda juga dapat memengaruhi status pemutaran animasi CSS melalui JavaScript, seperti menjeda dan memulai ulang

element.style.animationPlayState="paused";
element.style.animationPlayState="running";

// Vendor prefixed in old browsers
// element.style.webkitAnimationPlayState="paused";
// element.style.webkitAnimationPlayState="running";

Menariknya, akhir alami dari animasi CSS tidak menyetel status pemutaran ke "dijeda". Anda harus melakukannya sendiri. Katakanlah Anda ingin memulai ulang animasi untuk setiap hover dan Anda keren menggunakan jQuery untuk melakukannya…

$("#thing").hover(function() {
      
  this.style.animationPlayState = "running";

  $(this).on('animationEnd', function() {
    this.style.animationPlayState = "paused";
  });
        
});

_

Perhatikan bagaimana Anda harus memperhatikan acara

  Fancy Logo

_2 untuk diaktifkan untuk mengaturnya kembali ke "dijeda" atau tidak akan dimulai ulang dengan benar

Bagaimana cara membuat animasi CSS hanya diputar sekali?

Bagaimana Anda mengulang animasi di CSS?

Bagaimana cara menghentikan animasi agar tidak mengulangi CSS?

Mengapa animasi CSS saya tidak dapat diputar?