Jeda & Ulangi Animasi CSS dengan TUNGGU! Menghidupkan
Ada banyak yang dapat Anda lakukan dengan animasi CSS murni, tetapi menjeda & memutar animasi tidak dimungkinkan dengan spesifikasi W3 saat ini.
Tetapi dengan alat gratisan suka TUNGGU! Menghidupkan kamu sebenarnya bisa buat animasi lingkaran dari awal dengan keterlambatan ubahsuaian antara setiap loop. Ini mungkin tampak seperti tugas biasa tetapi itu memecahkan titik rasa sakit bagi banyak pengembang.
Perlu dicatat bahwa ada properti CSS yang disebut animasi-penundaan yang menunda mulai dari animasi CSS. Namun demikian tidak memengaruhi animasi yang berulang karena hanya menunda titik awal.
TUNGGU! Menghidupkan perhitungan otomatis berapa banyak jeda yang harus ditempatkan di dalam kerangka kunci animasi khusus untuk buat durasi jeda yang tepat Anda membutuhkan antara loop. Ini bisa dilakukan dengan tangan tetapi sangat rumit, belum lagi sangat menjengkelkan.
Aplikasi web ini bisa bekerja dengan fitur animasi CSS3 apa pun, termasuk rotasi dan transformasi. Anda tidak sedang menulis properti CSS baru melainkan membangun di atas fitur keyframes untuk membuat jeda berdasarkan persentase (dari 0% hingga 100%) di dalam animasi.
Lihat halaman beranda untuk melihat beberapa contoh beraksi. Cukup jelas apa yang dapat Anda lakukan dan kode sumber ada di sana untuk menyalin / menempel ke pekerjaan Anda sendiri.
Harap perhatikan ini bukan perpustakaan yang lengkap. Itu generator itu membuat kode CSS Anda sambil jalan berdasarkan apa pun yang Anda butuhkan untuk penundaan animasi.
Jika Anda ingin solusi yang lebih sederhana di luar situs maka Anda bisa unduh Sass mixin. Ini agak sulit karena membutuhkan peta Sass, jadi Anda harus memahami cara menambahkan properti khusus dan menulis sintaks Anda dengan benar.
Berikut ini contoh bagaimana Anda melakukannya hubungi mixin:
@include waitAnimate ((animationName: animName, keyframe: (0: (transform: skala (1), warna latar: biru), 50: (transform: skala (2), warna latar: hijau), 100: (transform : scale (3), background-color: red)), durasi: 2, waitTime: 1, timingFunction: easy, iterationCount: infinite));
Pengembang web Pro seharusnya tidak memiliki masalah mempelajari tali dan membangun ini menjadi mixin yang dapat digunakan kembali. Tetapi pengembang pemula mungkin kesulitan untuk membuatnya bekerja, karenanya aplikasi web.
Semua ini Kode sumber tersedia secara gratis di GitHub jika Anda ingin mengunduh salinan secara lokal. Tetapi karena ini adalah fitur yang aneh, itu bukan sesuatu yang mungkin Anda perlukan di banyak proyek. Itu sebabnya TUNGGU! Aplikasi web bernyawa harus lebih dari cukup untuk membantu Anda memecahkan masalah satu kali dari menunda animasi berulang dengan CSS murni.
Ini adalah retasan yang benar-benar menyenangkan yang juga sangat tidak jelas menurut desain. Tapi itu menunjukkan seberapa besar kemungkinan dengan CSS3 dan sedikit kecerdikan.
