Jeda & Jurang animasi CSS dengan WAIT! Animasi
Ada banyak yang boleh anda lakukan dengan animasi CSS tulen, tetapi hentikan & mengulangi animasi tidak mungkin dengan spesifikasi W3 semasa.
Tetapi dengan alat percuma seperti WAIT! Animasi anda sebenarnya boleh membuat animasi bergelung dari awal dengan kelewatan adat antara setiap gelung. Ini mungkin kelihatan seperti tugas biasa tetapi ia menyelesaikan masalah kesakitan bagi banyak pemaju.
Perlu diingatkan bahawa terdapat sifat CSS yang dipanggil kelewatan animasi yang mana penangguhan mulakan animasi CSS. Walau bagaimanapun ia tidak menjejaskan animasi yang berulang kerana ia hanya menangguhkan titik permulaan.
WAIT! Animasi mengira secara automatik berapa banyak jeda yang perlu diletakkan di dalam kerangka utama animasi adat kepada buat jangka jeda yang tepat anda perlukan antara gelung. Ini boleh dilakukan dengan tangan tetapi ia sangat yakin, apatah lagi super menjengkelkan.
Aplikasi web ini boleh bekerjasama dengan sebarang ciri animasi CSS3, termasuk putaran dan transformasi. Anda tidak menulis apa-apa sifat CSS baru tetapi sebaliknya membina di atas ciri utama utama untuk mencipta jeda berdasarkan peratusan (dari 0% hingga 100%) di dalam animasi.
Lihat halaman rumah untuk melihat beberapa contoh dalam tindakan. Ia cukup jelas apa yang boleh anda lakukan dan kod sumbernya ada di sana untuk menyalin / paste ke dalam kerja anda sendiri.
Sila ambil perhatian ini bukan perpustakaan sepenuhnya. Ia adalah penjana yang mencipta kod CSS anda on-the-fly berdasarkan apa sahaja yang anda perlukan untuk kelewatan animasi.
Sekiranya anda mahukan penyelesaian yang lebih mudah di luar tapak maka anda boleh muat turun mixin Sass. Ini sedikit lebih rumit kerana ia memerlukan peta Sass, jadi anda perlu memahami bagaimana untuk menambah sifat tersuai dan menulis sintaks anda dengan betul.
Berikut adalah contoh bagaimana anda mahu hubungi mixin itu:
(termasuk animasi): (0: : skala (3), warna latar belakang: merah)), tempoh: 2, tungguTime: 1, masaFunction: mudah, lelaranCount: infinite));
Pengembang web Pro tidak sepatutnya mempunyai masalah untuk mempelajari tali dan membina ini menjadi campuran yang boleh diguna semula. Tetapi pemaju baru boleh berjuang untuk mendapatkannya bekerja, dengan itu apl web.
Semua ini kod sumber boleh didapati secara percuma pada GitHub jika anda mahu memuat turun salinan secara tempatan. Tetapi kerana ini adalah satu ciri yang aneh, ini bukan sesuatu yang anda mungkin perlukan dalam banyak projek. Itulah sebabnya WAIT! Menggalakkan apl web harus lebih daripada cukup untuk membantu anda menyelesaikan masalah satu kali daripada melambatkan animasi bergelung dengan CSS tulen.
Ia adalah hack yang sangat menyeronokkan yang juga cukup jelas oleh reka bentuk. Tetapi ia menunjukkan betapa mungkin dengan CSS3 dan kepintaran yang sedikit.
