Cara Menggunakan Animasi CSS3 dengan Baik: Tutorial, Contoh Kod, dan Contoh

Apabila kita menggunakan JS dan jQuery, kita mempunyai kawalan penuh terhadap animasi dan kita dapat membuat beberapa kesan yang luar biasa, tetapi harganya cukup tinggi. Masa pemprosesan, keserasian merentas penyemak imbas (misalnya, peranti mudah alih, sangat berbeza ketika datang ke JS) dan kerumitan kod itu sendiri adalah perkara yang harus kita ingat semasa membuat antara muka animasi.


Jadi, hari ini kita akan melihat cara mengelakkan JS dengan menggunakan Animasi dan Peralihan CSS. Kami akan membincangkan dari langkah yang sangat asas hingga beberapa kesan yang luar biasa, seperti panel akordion dan sub-menu animasi.

Dapatkan tempat duduk, notepad dan penyemak imbas sebenar (apa pun kecuali IE) dan mari kita mulakan.

Memanaskan badan

Kami mempunyai beberapa kelebihan (dan kekurangan seperti yang ada dalam kehidupan kita) dalam menggunakan animasi CSS. Sekiranya anda perlu menjualnya kepada bos atau pelanggan anda, inilah yang harus anda ingat:

  • Mereka berpotensi lebih cepat, kerana mereka dapat memanfaatkan akselerasi perkakasan (sebagai implementasi HTML5)
  • Mereka akan berprestasi lebih baik dalam peranti mudah alih dan tidak memerlukan kod khusus untuk mengesan peristiwa sentuhan
  • JS perlu ditafsirkan oleh penyemak imbas dan kemungkinan untuk mematahkan penyemak imbas jauh lebih besar. Oleh itu, apabila CSS gagal, ia gagal secara senyap sementara JS boleh memecahkan keseluruhan halaman
  • Mereka mempunyai sokongan penyemak imbas yang cukup baik (laman web ini akan membantu anda memeriksa statistik tertentu mengenai hal itu: http://caniuse.com/#search)

Contoh Animasi CSS3

Sebelum kita memulakan mengenai artikel ini, mari kita lihat beberapa animasi indah yang dibuat dalam CSS tulen.

Paus Gagal CSS Twitter Murni

Paus Gagal Animasi

 Dibuat oleh Steven Dennis, lihat ini dalam tindakan.

Coke Tatal CSS Murni Boleh
Contoh CSS 3 Animasi: Menatal Coke Can

Dibuat oleh Roman Cortes, lihat ini dalam tindakan.

Manusia Berjalan CSS tulen

Contoh CSS 3 Animasi: The Walking Man

 Dibuat oleh Andrew Hoyer, lihat ini dalam tindakan.

Menjadikan Tangan Anda Kotor

Mari mulakan kodnya. Kami akan menggunakan banyak kelas pseudo CSS untuk mencetuskan animasi. Sejujurnya, banyak pembangun mengesyorkan anda menggunakan JS untuk mengaktifkan dan menyahaktifkan animasi, tetapi di sini kita akan melihat cara yang lebih mudah:

# ujian {
latar belakang: merah;
}
#test: arahkan {
latar belakang: hijau;
}
#test: aktif {
latar belakang: biru;
}
#test: sasaran {
latar belakang: hitam;
}

Kami mempunyai beberapa kelas pseudo lain untuk digunakan, tetapi anda mempunyai idea! Jadi inilah yang berlaku sekiranya anda mengklik elemen #test (dengan andaian itu adalah pautan):

  • Keadaan normal: Latar belakang akan berwarna merah
  • Arahkan kursor: Apabila tetikus memasuki kawasan elemen, ia akan mempunyai latar belakang hijau
  • Aktif: Apabila anda mengklik kursor di atasnya dan semasa butang tetikus masih ditekan, warna latar akan menjadi biru
  • Sasaran: Apabila halaman semasa mempunyai #test dalam URL elemen ini akan menjadi hitam

Masing-masing di antaranya dapat digunakan untuk animasi CSS, misalnya Anda dapat membuat 2 pautan untuk mengaktifkan dan menonaktifkan animasi CSS menggunakan elemen semu sasaran dengan kod ini:

aktifkan
nyahaktifkan

Peralihan CSS

Peralihan CSS akan berubah dari keadaan awal ke keadaan akhir dengan lancar. Oleh itu, anda akan menentukan dalam pemilih utama menggunakan sifat “peralihan” masa dan setiap harta yang akan dipengaruhi dan bagaimana animasinya. Mari lihat contoh:

.ujian {
/ * fungsi peralihan jangka masa-harta tanah, * /
warna: biru;
peralihan: warna 2s, kemudahan fon 2-saiz;
}
.ujian: berlegar {
warna: merah;
}
.ujian: aktif {
saiz fon: 200%;
}

Apabila anda menuding elemen .test, ia akan berubah secara beransur-ansur warnanya dari biru menjadi merah (palet apa yang bagus, ya?). Apabila anda mengklik elemen, ukuran fon secara beransur-ansur akan meningkat menjadi 200% dari ukuran fon lalai.

Kami juga memiliki properti “peralihan waktu”, yang ditetapkan sebagai kemudahan, bahawa bagaimana “waktu” yang tersedia untuk animasi akan dihabiskan. Berikut adalah nilai yang mungkin:

  • Linear: Kelajuan yang sama dari awal hingga akhir
  • Kemudahan: Permulaan perlahan
  • Kemudahan: Akhir perlahan
  • Kemudahan: Permulaan perlahan, cepat di tengah, kemudian hujung perlahan
  • Kemudahan keluar: Permulaan perlahan, akhir perlahan
  • Cubic-bezier (a, b, c, d): Kelajuan tersuai

Fungsi Bezier kubik akan membuat animasi tersuai dengan 4 nombor yang bervariasi dari 0 hingga 1, mewakili lengkung matematik untuk kelajuan animasi X tempoh.

Untuk keserasian penyemak imbas yang lebih baik, anda harus mempertimbangkan untuk menggunakan awalan vendor untuk opera, Firefox, dan webkit seperti ini:

div {
lebar: 400px;
-o-peralihan: lebar 2s;
-peralihan moz: lebar 2s;
-peralihan kit web: lebar 2s;
peralihan: lebar 2s;
}

Anda juga boleh menggunakan pertanyaan media untuk menentukan peralihan yang berbeza bergantung pada lebar penyemak imbas (peranti mudah alih, tablet). Ini adalah contoh mudah:

badan {
saiz fon: 1em;
}
Skrin @media dan (lebar maksimum: 800px) {
badan {
saiz fon: 0.8em;
}
}
Skrin @media dan (lebar maksimum: 400px) {
badan {
Saiz fon: 0.7em;
}
}

Di sini saiz fon akan berubah secara tiba-tiba apabila anda menambah lebar penyemak imbas. Kod ini akan menghalangnya daripada berlaku, memberikan peralihan yang lebih lancar:

badan {
-o-peralihan: font-size .5s linear;
-peralihan moz: saiz fon .5s linear;
-peralihan kit web: saiz fon .5s linear;
peralihan: ukuran fon .5s linear;
}

Anda dapat menggunakan ini juga jika Anda memiliki layar atau ukuran yang berbeda untuk potret / lanskap, jika anda ingin mengubah lebar, warna, pengayuh, tampilan menu.

Animasi CSS – Keseronokan Sebenar Bermula

Animasi adalah urutan peralihan yang ditentukan dalam pemilih tunggal. Untuk menentukan animasi CSS, anda perlu mengikuti 2 langkah.

Peraturan @keyframe digunakan untuk menentukan urutan langkah-langkah animasi, dan ia ditentukan oleh nama unik dan gaya yang menggambarkan bagaimana animasi ini berfungsi. Seperti biasa, kami memerlukan beberapa awalan vendor, seperti dalam contoh ini:

/ * kod yang sama untuk setiap vendor * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * nama animasi * /
@keyframe my-animation {
/ * pemilih bingkai * /
0% {
/ * gaya bingkai * /
Kiri: 0px;
Teratas: 0px;
}
25% {
Kiri: 200 piksel;
Teratas: 0px;
}
50% {
Kiri: 200 piksel;
Teratas: 200px;
}
75% {
Kiri: 0px;
Teratas: 200px;
}
100% {
Kiri: 0px;
Teratas: 0px;
}
}

Jadi, setiap gaya ditentukan oleh bingkai / jangka waktu (seperti bingkai dari animasi flash) sebagai peratusan dan gaya yang harus diterapkan di sana. Kerangka utama ini, misalnya mengatakan bahawa elemen akan bergerak ke kiri, kemudian atas, kemudian kanan, kemudian bawah.

Setelah anda mengikuti langkah 1 dan membuat bingkai utama anda, anda sebenarnya boleh menerapkannya pada elemen. Kemudian kita akan menggunakan logik yang hampir sama seperti yang kita lakukan dengan peralihan CSS, perbezaannya ialah sekarang “peralihan” kita adalah animasi yang sangat kompleks.

Untuk menerapkannya, kami akan menggunakan harta animasi dan ia mempunyai 7 sub-sifat:

  • Nama: pengecam unik itu
  • Tempoh: Berapa lama masa yang diperlukan dari 0% hingga 100%
  • Fungsi masa: hampir sama dengan fungsi pemasaan peralihan
  • Kelewatan: Berapa lama masa yang diperlukan untuk memulakan 0%
  • Pengulangan pengulangan: Berapa banyak pengulangan yang akan kita miliki (“tak terhingga” untuk gelung tak terhingga)
  • Arah: normal atau alternatif (terbalik)
  • Play-state: jika animasi berjalan atau dijeda

Ini akan menerapkan animasi kita ke elemen #test ketika itu adalah sasaran halaman:

#test: sasaran {
/ * nama animasi | tempoh | fungsi masa | kelewatan | bilangan lelaran | arah | keadaan permainan * /
animasi: larian 10s linear 0s saya berjalan normal;
}

Dengan ini, kita dapat membuat beberapa contoh hebat.

CSS Sahaja Akordion

Kami akan membuat panel yang dilipat menggunakan animasi CSS. Berikut adalah struktur HTML asas:

Tab 1

TEKS 1

Tab 2

TEKS 2

Tab 3

TEKS 3

Ini hanya akan membuat panel dan pautan yang akan mencetuskan masing-masing. Dan di sinilah keajaiban berlaku:

/ * setiap div yang ada di dalam akordeon * /
.akordion div {
/ * disembunyikan secara lalai * /
tinggi: 0;
limpahan: tersembunyi;
/ * ilmu hitam * /
peralihan: ketinggian 1s;
}
/ * apabila div yang disebutkan adalah sasaran * /
.akordion div: sasaran {
/ * tinggi: automatik tidak akan berfungsi, tetapi ini akan berfungsi dengan baik * /
tinggi: 80px;
}

Cukup sederhana, ya? Dan anda telah menghabiskan seluruh hidup anda menggunakan JS untuk ini? :)

Menu Hanya CSS dengan Submenu

Dan ini adalah satu lagi aplikasi yang agak mudah. Anda pasti mempunyai menu navigasi di laman web anda, dan selalunya kita perlu menggunakan beberapa submenu di sana. Kaedah terbaik untuk menunjukkan dan menyembunyikan item adalah menggunakan jQuery, bukan? Baiklah, fikirkan semula setelah anda menguji kod ini:

  • Perkara 1
    • Perkara 1.1
    • Perkara 1.2
  • Perkara 2
    • Perkara 2.1
    • Perkara 2.2

Dan ilmu sihir bermula di sini:

sebuah {
/ * hanya menjadikan pautan lebih baik * /
paparan: blok;
pembalut: 4px;
}
nav {
text-align: tengah;
}
/ * sebarang menu (termasuk yang utama) * /
nav ul {
paparan: sebaris-blok;
gaya senarai: tiada;
}
nav>ul>li {
/ * item mendatar (menegak juga berfungsi dengan baik) * /
terapung: kiri;
}
nav li div {
/ * meruntuhkan sub-menu * /
tinggi: 0;
limpahan: tersembunyi;
/ * Perasaan Houdini * /
peralihan: ketinggian 1s;
}
nav li: berlegar>div {
tinggi: 56px;
}

Menjumlahkan

Ini semestinya hanya panduan permulaan. Terdapat banyak kesan sejuk lain yang boleh dilakukan dengan menggunakan animasi CSS sahaja dan banyak perkara yang pasti akan datang.

Jadi, adakah anda pernah menggunakan ini sebelum ini? Bolehkah anda memikirkan aplikasi lain yang baik untuk animasi CSS? Kongsi pendapat anda menggunakan komen!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map