Sistem kecil yang berguna untuk pintu masuk animasi di CSS-tutorial css-php.cn

Sistem kecil yang berguna untuk pintu masuk animasi di CSS

Laman web bukan sekadar dokumen statik, beberapa butiran boleh menjadikan laman web lebih jelas dan menarik. Bagaimana jika kandungan laman web tidak dipaparkan secara langsung, tetapi muncul dalam pop timbul, slaid, pudar atau berputar? Walaupun animasi sedemikian tidak selalu praktikal, dalam beberapa kes mereka dapat menarik perhatian pengguna terhadap unsur -unsur tertentu, mengukuhkan perbezaan antara unsur -unsur, dan bahkan menunjukkan perubahan keadaan, sehingga mereka tidak sepenuhnya berguna.

Jadi saya membuat satu set alat CSS untuk menambah kesan animasi ke elemen apabila ia memasuki bidang pandangan. Ya, ini adalah pelaksanaan CSS yang benar -benar tulen. Ia bukan sahaja menyediakan pelbagai animasi dan variasi, tetapi juga menyokong kesan animasi interleving, yang hampir seperti mewujudkan adegan.

Contohnya, seperti ini:

Ini benar -benar hanya versi mudah versi yang lebih maju ini:

Kami mula -mula menerangkan asas -asas mewujudkan animasi, kemudian memperkenalkan beberapa butiran yang saya tambahkan, bagaimana untuk menghubungkan animasi, dan bagaimana untuk menerapkannya dalam elemen HTML, dan akhirnya, kita akan melihat bagaimana untuk mencapai semua ini berkenaan dengan keutamaan pergerakan pengguna yang dikurangkan.

Pengetahuan asas

Idea teras adalah untuk menambah animasi CSS @keyframes yang mudah, memohon kepada apa sahaja yang kita mahu menghidupkan halaman apabila ia dimuatkan. Mari biarkan elemen memudar dan berubah dari opacity: 0 hingga opacity: 1 setengah saat:

 .animate {
  Animasi-Pemulihan: 0.5s;
  nama animasi: fade animate;
  Animasi-Delay: 0.5s;
  Animasi-Fill-Mode: ke belakang;
}

@keyframes animate-fade {
  0% {Opacity: 0;
  100% {Opacity: 1;
}

Salin selepas log masuk

Sila ambil perhatian bahawa terdapat juga animation-delay 0.5 saat di sini untuk membolehkan seluruh laman web dimuatkan terlebih dahulu. animation-fill-mode: backwards digunakan untuk memastikan keadaan animasi awal kami aktif apabila halaman dimuatkan. Tanpa ini, elemen animasi kami akan muncul sebelum kami mahu.

Jika kita malas, kita boleh berhenti di sini. Walau bagaimanapun, pembaca trik CSS pastinya tidak akan malas, jadi mari kita lihat bagaimana menggunakan sistem untuk memperbaiki perkara seperti ini.

Animasi yang lebih sejuk

Lebih menyeronokkan untuk mempunyai pelbagai animasi daripada hanya menggunakan satu atau dua animasi. Kami tidak perlu membuat sekumpulan @keyframes baru untuk membuat lebih banyak animasi. Mewujudkan kelas baru adalah sangat mudah, kita hanya perlu menukar bingkai yang digunakan oleh animasi dan menyimpannya sama untuk semua masa.

Bilangan animasi CSS hampir tidak terhad. blur() brightness() saturate()

Tetapi sekarang, mari kita mulakan dengan kelas animasi baru yang menggunakan transformasi CSS untuk menjadikan elemen "muncul" ke tempatnya.

 .animate.pop {
  Animasi-Pemulihan: 0.5s;
  Nama Animasi: Animate-Pop;
  Animasi-masa-fungsi: padu-bezier (.26, .53, .74, 1.48);
}

@KeyFrames Animate-Pop {
  0% {
    Kelegapan: 0;
    Transform: Skala (0.5, 0.5);
  }

  100% {
    Kelegapan: 1;
    Transform: Skala (1, 1);
  }
}

Salin selepas log masuk

Saya menambah lengkung masa kecil cubic-bezier() dari Cubic-Bezier.com yang sangat diperlukan Lea Verou untuk kesan pemulihan yang berdaya tahan.

Tambah kelewatan

Kita boleh melakukan yang lebih baik! Sebagai contoh, kita boleh membuat unsur -unsur bernyawa pada masa yang berlainan. Ini mewujudkan kesan interleaving, mewujudkan gerakan yang kelihatan kompleks tanpa memerlukan banyak kod.

Ini terasa hebat menggunakan penapis CSS, penukaran CSS dan animasi interleaved kira -kira sepersepuluh satu saat pada tiga elemen halaman:

Apa yang kita lakukan ialah membuat kelas baru untuk setiap elemen yang memisahkan masa elemen mula animasi, menggunakan nilai animation-delay yang sepersepuluh dari kedua.

 .delay-1 {Animation-Delay: 0.6S;  
.delay-2 {Animation-Delay: 0.7s;
.delay-3 {Animation-Delay: 0.8s;

Salin selepas log masuk

Segala -galanya adalah sama. Ingat bahawa latensi asas kami adalah 0.5s, jadi kelas penolong ini mula mengira dari situ.

Hormati keutamaan akses

Mari kita menjadi warganegara web yang sangat baik dan keluarkan animasi untuk pengguna yang telah membolehkan dikurangkan keutamaan sukan:

 @media skrin dan (lebih suka-dikurangkan-gerakan: mengurangkan) {
  .animate {animation: none! Penting;
}

Salin selepas log masuk

Dengan cara ini, animasi tidak akan dimuatkan dan unsur -unsur akan memasuki bidang pandangan seperti biasa. Pergerakan "Kurangkan" tidak selalu bermaksud pergerakan "penyingkiran", yang patut diingatkan.

Sapukan Animasi ke Elemen HTML

Setakat ini, kami telah melihat animasi asas serta yang lebih maju, yang kami dapat menjadikannya lebih maju dengan kelewatan animasi interleaved (termasuk dalam kelas baru). Kami juga melihat bagaimana untuk menghormati keutamaan sukan pengguna pada masa yang sama.

Walaupun terdapat demonstrasi masa nyata yang menunjukkan konsep-konsep ini, kita sebenarnya tidak meliputi cara menerapkan kerja kita ke HTML. Perkara yang menarik ialah kita boleh menggunakannya pada hampir semua elemen, sama ada div, rentang, artikel, header, seksyen, jadual, bentuk ... anda tahu.

Apa yang akan kita lakukan ialah: Kami mahu menggunakan sistem animasi kami pada tiga elemen HTML, masing -masing mendapat tiga kelas. Kita boleh mengikat semua kod animasi ke elemen itu sendiri, tetapi memisahkannya membolehkan kita mendapatkan sistem animasi yang boleh diguna semula.

.Animate: Ini adalah kelas asas yang mengandungi perisytiharan dan masa animasi teras kami.
Jenis Animasi: Kami akan menggunakan animasi "pop timbul" sebelumnya, tetapi kami juga boleh menggunakan animasi pudar. Kelas ini secara teknikal pilihan, tetapi ia adalah cara yang baik untuk menggunakan pergerakan yang berbeza.
.delay- : Seperti yang dinyatakan sebelum ini, kita boleh membuat kelas yang berbeza untuk menghubungkan masa animasi bermula pada setiap elemen, menghasilkan kesan yang kemas. Kelas ini juga pilihan.

Jadi elemen animasi kami sekarang kelihatan seperti ini:

<h2> Satu!</h2>
<h2>Dua!</h2>
<h2>Tiga!</h2>

Salin selepas log masuk

Mari mengira mereka!

kesimpulannya

Semaknya: Kami mulakan dengan satu set asas @keyframes dan menjadikannya sistem lengkap untuk menggunakan animasi menarik untuk elemen memasuki bidang pandangan.

Ini sudah tentu sangat menarik. Tetapi takeaway terbesar bagi saya ialah contoh -contoh yang kita lihat membentuk sistem lengkap yang boleh digunakan untuk membuat garis dasar, pelbagai jenis animasi, penangguhan interleaving dan menghormati pilihan gerakan pengguna. Bagi saya, ini adalah semua elemen sistem yang fleksibel dan mudah digunakan. Ia memberi kita banyak perkara yang sangat sedikit tanpa sekumpulan sisa tambahan.

Apa yang kita sampaikan benar -benar boleh menjadi perpustakaan animasi lengkap. Tetapi sudah tentu saya tidak berhenti di sana. Saya telah menyediakan semua fail animasi CSS saya kepada anda. Terdapat beberapa jenis animasi di dalamnya, termasuk 15 kelas dengan kelewatan yang berbeza, yang boleh digunakan untuk menghubungkan perkara. Saya telah menggunakannya dalam projek saya sendiri, tetapi ini masih merupakan versi awal dan saya suka menerima maklum balas mengenainya. Sila nikmati dan beritahu saya apa yang anda fikirkan dalam komen!

 /* ========================================================================================================
Sistem Animasi oleh Neale Van Fleet dari Rogue Amoeba
=============================================================================================== =
.animate {
  Animasi-Pemulihan: 0.75s;
  Animasi-Delay: 0.5s;
  nama animasi: fade animate;
  Animasi-masa-fungsi: padu-bezier (.26, .53, .74, 1.48);
  Animasi-Fill-Mode: ke belakang;
}

/ * Pudar dalam */
.animate.fade {
  nama animasi: fade animate;
  Animasi-masa-fungsi: mudah;
}

@keyframes animate-fade {
  0% {Opacity: 0;
  100% {Opacity: 1;
}

/ * Pop dalam */
.animate.pop {animation-name: animate-pop;

@KeyFrames Animate-Pop {
  0% {
    Kelegapan: 0;
    Transform: Skala (0.5, 0.5);
  }
  100% {
    Kelegapan: 1;
    Transform: Skala (1, 1);
  }
}

/ * Kabur dalam */
.animate.blur {
  nama animasi: animate-blur;
  Animasi-masa-fungsi: mudah;
}

@keyframes Animate-blur {
  0% {
    Kelegapan: 0;
    Penapis: Blur (15px);
  }
  100% {
    Kelegapan: 1;
    penapis: blur (0px);
  }
}

/ * Bersinar dalam */
.animate.glow {
  Nama Animasi: Animate-Glow;
  Animasi-masa-fungsi: mudah;
}

@KeyFrames Animate-Glow {
  0% {
    Kelegapan: 0;
    penapis: kecerahan (3) tepu (3);
    Transform: Skala (0.8, 0.8);
  }
  100% {
    Kelegapan: 1;
    Penapis: kecerahan (1) tepu (1);
    Transform: Skala (1, 1);
  }
}

/ * Tumbuh di */
.animate.grow {animation-name: animate-grow;

@KeyFrames Animate-Grow {
  0% {
    Kelegapan: 0;
    Transform: Skala (1, 0);
    Keterlihatan: Tersembunyi;
  }
  100% {
    Kelegapan: 1;
    Transform: Skala (1, 1);
  }
}

/ * Splat dalam */
.animate.splat {animation-name: animate-splat;

@keyframes animate-splat {
  0% {
    Kelegapan: 0;
    Transform: Skala (0, 0) Putar (20Deg) Terjemahan (0, -30px);
    }
  70% {
    Kelegapan: 1;
    Transform: Skala (1.1, 1.1) berputar (15deg);
  }
  85% {
    Kelegapan: 1;
    Transform: Skala (1.1, 1.1) berputar (15deg) Terjemahan (0, -10px);
  }

  100% {
    Kelegapan: 1;
    Transform: Skala (1, 1) Putar (0) Terjemahan (0, 0);
  }
}

/ * Gulung di */
.animate.roll {animation-name: animate-roll;

@KeyFrames Animate-Roll {
  0% {
    Kelegapan: 0;
    Transform: Skala (0, 0) berputar (360deg);
  }
  100% {
    Kelegapan: 1;
    Transform: Skala (1, 1) Putar (0Deg);
  }
}

/ * Flip dalam */
.animate.flip {
  nama animasi: animate-flip;
  gaya transform: Preserve-3D;
  Perspektif: 1000px;
}

@keyframes Animate-flip {
  0% {
    Kelegapan: 0;
    Transform: Rotatex (-120Deg) Skala (0.9, 0.9);
  }
  100% {
    Kelegapan: 1;
    Transform: Rotatex (0Deg) Skala (1, 1);
  }
}

/ * Berputar di */
.animate.spin {
  nama animasi: animate-spin;
  gaya transform: Preserve-3D;
  Perspektif: 1000px;
}

@KeyFrames Animate-Spin {
  0% {
    Kelegapan: 0;
    Transform: Rotatey (-120Deg) Skala (0.9, .9);
  }
  100% {
    Kelegapan: 1;
    Transform: Rotatey (0Deg) Skala (1, 1);
  }
}

/ * Slaid dalam */
.animate.slide {animation-name: animate-slide;

@KeyFrames Animate-Slide {
  0% {
    Kelegapan: 0;
    Transform: Terjemahan (0, 20px);
  }
  100% {
    Kelegapan: 1;
    Transform: Terjemahan (0, 0);
  }
}

/ * Drop dalam */
.animate.drop { 
  nama animasi: animate-drop; 
  Animasi-masa-fungsi: padu-bezier (.77, .14, .91, 1.25);
}

@KeyFrames Animate-Drop {
0% {
  Kelegapan: 0;
  Transform: Terjemahan (0, -300px) skala (0.9, 1.1);
}
95% {
  Kelegapan: 1;
  Transform: Terjemahan (0, 0) skala (0.9, 1.1);
}
96% {
  Kelegapan: 1;
  Transform: Terjemahan (10px, 0) skala (1.2, 0.9);
}
97% {
  Kelegapan: 1;
  Transform: Terjemahan (-10px, 0) skala (1.2, 0.9);
}
98% {
  Kelegapan: 1;
  Transform: Terjemahan (5px, 0) skala (1.1, 0.9);
}
99% {
  Kelegapan: 1;
  Transform: Terjemahan (-5px, 0) skala (1.1, 0.9);
}
100% {
  Kelegapan: 1;
  Transform: Terjemahan (0, 0) skala (1, 1);
  }
}

/ * Kelewatan animasi */
.delay-1 {
  Animasi-Delay: 0.6S;
}
.delay-2 {
  Animasi-Delay: 0.7s;
}
.delay-3 {
  Animasi-Delay: 0.8s;
}
.delay-4 {
  Animasi-Delay: 0.9s;
}
.delay-5 {
  Animasi-Delay: 1s;
}
.delay-6 {
  Animasi-Delay: 1.1s;
}
.delay-7 {
  Animasi-Delay: 1.2s;
}
.delay-8 {
  Animasi-Delay: 1.3s;
}
.delay-9 {
  Animasi-Delay: 1.4s;
}
.delay-10 {
  Animasi-Delay: 1.5s;
}
.delay-11 {
  Animasi-Delay: 1.6S;
}
.delay-12 {
  Animasi-Delay: 1.7s;
}
.delay-13 {
  Animasi-Delay: 1.8s;
}
.delay-14 {
  Animasi-Delay: 1.9s;
}
.delay-15 {
  Animasi-Delay: 2s;
}

@media skrin dan (lebih suka-dikurangkan-gerakan: mengurangkan) {
  .animate {
    Animasi: Tiada! Penting;
  }
}

Salin selepas log masuk

Atas ialah kandungan terperinci Sistem kecil yang berguna untuk pintu masuk animasi di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!