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 berhasilimg {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