Atas
Dasar
Kiri
Benar
Memudar
Perbesar
Putaran
W3. Kelas Animasi CSS
W3. CSS menyediakan kelas berikut untuk animasi
ClassDefinesw3-animate-topSlides dalam elemen dari atas [-300px ke 0]w3-animate-bottomSlides dalam elemen dari bawah [-300px ke 0]w3-animate-leftSlides dalam elemen dari kiri [-300px ke 0] . 8 detikw3-animate-zoomMenganimasi elemen dari 0 hingga 100% dalam ukuranw3-animate-fadingMenganimasi opacity elemen dari 0 hingga 1 dan 1 ke 0 [fades in + fade out]w3-spinMemutar elemen 360 derajatAnimate Top
Slide kelas w3-animate-top dalam elemen dari atas [dari -300px ke 0]
Contoh
Animasi itu Menyenangkan
Animasikan Bawah
Kelas w3-animate-bottom meluncur dalam elemen dari bawah [dari -300px ke 0]
Contoh
Animasi itu Menyenangkan
Animasikan Kiri
Kelas w3-animate-left meluncur dalam elemen dari kiri [-300px ke 0]
Contoh
Animasi itu Menyenangkan
Animasi Kanan
Kelas w3-animate-right meluncur dalam elemen dari kanan [-300px ke 0]
Contoh
Animasi itu Menyenangkan
Memudar di Elemen
Kelas w3-animate-opacity menganimasikan opacity elemen dari 0 menjadi 1 dalam 0. 8 detik
Fade dalam elemen dengan kelas w3-animate-opacity
Perbesar Elemen
Kelas w3-animate-zoom menganimasikan elemen dari ukuran 0 hingga 100%.
Perbesar elemen dengan kelas w3-animate-zoom
Elemen Putar
Kelas w3-spin memutar elemen 360 derajat
Memudar Tak Terbatas
Kelas w3-animate-fading memudar masuk dan keluar elemen setiap 10 detik [terus menerus]
Animasi Fade In dan Out
Pudar Semua
Contoh
Animasi CSS memungkinkan untuk menganimasikan transisi dari satu konfigurasi gaya CSS ke konfigurasi lainnya. Animasi terdiri dari dua komponen, gaya yang menjelaskan animasi CSS dan sekumpulan keyframe yang menunjukkan status awal dan akhir gaya animasi, serta kemungkinan titik arah perantara
Ada tiga keunggulan utama animasi CSS dibandingkan teknik animasi berbasis skrip tradisional
- Mereka mudah digunakan untuk animasi sederhana;
- Animasi berjalan dengan baik, bahkan di bawah beban sistem sedang. Animasi sederhana sering kali berkinerja buruk di JavaScript. Mesin rendering dapat menggunakan frame-skipping dan teknik lain untuk menjaga performa semulus mungkin
- Membiarkan browser mengontrol urutan animasi memungkinkan browser mengoptimalkan kinerja dan efisiensi, misalnya dengan mengurangi frekuensi pembaruan animasi yang berjalan di tab yang saat ini tidak terlihat
Untuk membuat rangkaian animasi CSS, Anda memberi gaya pada elemen yang ingin Anda animasikan dengan properti
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
0 atau sub-propertinya. Ini memungkinkan Anda mengonfigurasi pengaturan waktu, durasi, dan detail lain tentang bagaimana urutan animasi akan berkembang. Ini tidak mengonfigurasi tampilan sebenarnya dari animasi, yang dilakukan menggunakan aturan animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
1 seperti yang dijelaskan pada bagian di bawah iniSub-properti dari
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
0 properti adalahanimation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
_3Menentukan penundaan antara pemuatan elemen dan dimulainya rangkaian animasi dan apakah animasi harus dimulai segera dari awal atau sebagian dari animasi
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
_4Menentukan apakah iterasi pertama animasi harus maju atau mundur dan apakah iterasi berikutnya harus berganti arah pada setiap proses melalui urutan atau reset ke titik awal dan ulangi
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
5Menentukan lamanya waktu di mana animasi menyelesaikan satu siklus
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
_6Menentukan cara animasi menerapkan gaya ke targetnya sebelum dan sesudah dijalankan
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
_7Menentukan berapa kali animasi harus diulang
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
_8Menentukan nama aturan
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
_1 yang menjelaskan keyframe animasianimation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
_0Menentukan apakah akan menjeda atau memutar urutan animasi
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
_1Menentukan bagaimana animasi bertransisi melalui keyframe dengan membuat kurva akselerasi
Setelah Anda mengonfigurasi pengaturan waktu animasi, Anda perlu menentukan tampilan animasi. Hal ini dilakukan dengan membuat satu atau lebih bingkai utama menggunakan aturan
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
1. Setiap keyframe menjelaskan bagaimana elemen animasi harus dirender pada waktu tertentu selama urutan animasiKarena pengaturan waktu animasi ditentukan dalam gaya CSS yang mengonfigurasi animasi, keyframe menggunakan
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
3 untuk menunjukkan waktu selama urutan animasi berlangsung. 0% menunjukkan momen pertama urutan animasi, sedangkan 100% menunjukkan keadaan akhir animasi. Karena dua waktu ini sangat penting, mereka memiliki alias khusus. animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
4 dan animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
5. Keduanya opsional. Jika animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
_4/animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
7 atau animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
5/animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
9 tidak ditentukan, browser memulai atau menyelesaikan animasi menggunakan nilai yang dihitung dari semua atributSecara opsional, Anda dapat menyertakan bingkai kunci tambahan yang menjelaskan langkah-langkah perantara antara awal dan akhir animasi
Singkatan
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
0 berguna untuk menghemat ruang. Sebagai contoh, beberapa aturan yang telah kami gunakan melalui artikel inip {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}
dapat diganti dengan menggunakan steno
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
0p {
animation: 3s infinite alternate slidein;
}
Untuk mempelajari lebih lanjut tentang urutan di mana nilai properti animasi yang berbeda dapat ditentukan menggunakan singkatan
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
0, lihat halaman referensi animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
0Properti tulisan tangan animasi CSS dapat menerima banyak nilai, dipisahkan dengan koma. Fitur ini dapat digunakan ketika Anda ingin menerapkan banyak animasi dalam satu aturan dan mengatur durasi yang berbeda, jumlah iterasi, dll. , untuk setiap animasi. Mari kita lihat beberapa contoh cepat untuk menjelaskan permutasi yang berbeda
Dalam contoh pertama ini, ada tiga durasi dan tiga nilai hitungan iterasi. Jadi setiap animasi diberi nilai durasi dan jumlah iterasi dengan posisi yang sama dengan nama animasi. Animasi
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
_4 diberi durasi animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
5 dan hitungan iterasi animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
6, dan animasi animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
_7 diberi durasi animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
8 dan hitungan iterasi animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
9animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
Dalam contoh kedua ini, tiga nama animasi ditetapkan, tetapi hanya ada satu durasi dan hitungan iterasi. Dalam hal ini, ketiga animasi diberikan durasi dan jumlah iterasi yang sama
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
Dalam contoh ketiga ini, tiga animasi ditentukan, tetapi hanya dua durasi dan hitungan iterasi. Dalam kasus seperti di mana tidak ada cukup nilai dalam daftar untuk menetapkan satu terpisah untuk setiap animasi, siklus penetapan nilai dari item pertama hingga terakhir dalam daftar yang tersedia dan kemudian kembali ke item pertama. Jadi,
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
_4 mendapatkan durasi animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
5, dan p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
2 mendapatkan durasi p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
3, yang merupakan nilai terakhir dalam daftar nilai durasi. Penetapan nilai durasi kini disetel ulang ke nilai pertama; . Nilai hitungan iterasi [dan nilai properti lainnya yang Anda tentukan] akan ditetapkan dengan cara yang samaanimation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
Jika ketidakcocokan dalam jumlah animasi dan nilai properti animasi terbalik, misalkan ada lima nilai
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
5 untuk tiga nilai animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
8, maka nilai properti animasi ekstra atau tidak terpakai, dalam hal ini, dua nilai animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
5, tidak berlaku untuk animasi apa pun Catatan. Beberapa browser lama [sebelum 2017] mungkin memerlukan awalan;
Contoh sederhana ini memberi gaya pada elemen
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
_0 sehingga teks meluncur masuk dari tepi kanan jendela browserPerhatikan bahwa animasi seperti ini dapat menyebabkan halaman menjadi lebih lebar dari jendela browser. Untuk menghindari masalah ini, letakkan elemen yang akan dianimasikan dalam wadah, dan atur
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
1
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
2 pada wadahp {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
Dalam contoh ini, gaya untuk elemen
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
_0 menetapkan bahwa animasi harus memakan waktu 3 detik untuk dieksekusi dari awal hingga akhir, menggunakan properti animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
5, dan bahwa nama aturan animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
1 yang menentukan bingkai utama untuk urutan animasi diberi nama "slidein Jika kami ingin gaya kustom apa pun pada elemen
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
0 muncul di browser yang tidak mendukung animasi CSS, kami juga akan menyertakannya di sini; Keyframe ditentukan menggunakan aturan
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
1. Dalam hal ini, kami hanya memiliki dua bingkai utama. Yang pertama terjadi pada 0% [menggunakan alias animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
4]. Di sini, kami mengonfigurasi margin kiri elemen menjadi 100% [yaitu, di tepi paling kanan dari elemen yang memuatnya], dan lebar elemen menjadi 300% [atau tiga kali lebar elemen yang memuatnya]. . Hal ini menyebabkan frame pertama animasi memiliki header yang ditarik dari tepi kanan jendela browserBingkai kunci kedua [dan terakhir] terjadi pada 100% [menggunakan alias
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
5]. Margin kiri diatur ke 0% dan lebar elemen diatur ke 100%. Ini menyebabkan tajuk menyelesaikan animasinya rata dengan tepi kiri area konten
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
Catatan. Muat ulang halaman untuk melihat animasi
Mari tambahkan keyframe lain ke animasi contoh sebelumnya. Katakanlah kita ingin ukuran font header bertambah saat bergerak dari kanan ke kiri untuk sementara waktu, lalu mengecil kembali ke ukuran aslinya. Itu sesederhana menambahkan keyframe ini
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
Kode lengkap sekarang terlihat seperti ini
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
Ini memberi tahu browser bahwa 75% dari urutan animasi, header harus memiliki margin kiri sebesar 25% dan lebarnya harus 150%
Catatan. Muat ulang halaman untuk melihat animasi
Untuk membuat animasi berulang, gunakan properti
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
7 untuk menunjukkan berapa kali mengulang animasi. Dalam hal ini, mari kita gunakan 75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
_1 untuk mengulangi animasi tanpa batasp {
animation: 3s infinite alternate slidein;
}
0Menambahkannya ke kode yang ada
p {
animation: 3s infinite alternate slidein;
}
_1
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
Itu membuatnya berulang, tetapi sangat aneh jika ia melompat kembali ke awal setiap kali mulai dianimasikan. Yang benar-benar kami inginkan adalah untuk bergerak bolak-balik melintasi layar. Itu mudah dilakukan dengan mengatur
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
4 ke 75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
3p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Dan kode lainnya
p {
animation: 3s infinite alternate slidein;
}
_1
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
Anda bisa mendapatkan kontrol tambahan atas animasi — serta informasi berguna tentangnya — dengan memanfaatkan acara animasi. Peristiwa ini, diwakili oleh objek
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
_4, dapat digunakan untuk mendeteksi kapan animasi dimulai, selesai, dan memulai iterasi baru. Setiap peristiwa mencakup waktu terjadinya serta nama animasi yang memicu peristiwa tersebutKami akan memodifikasi contoh teks geser untuk menampilkan beberapa informasi tentang setiap peristiwa animasi saat itu terjadi, sehingga kami dapat melihat cara kerjanya
Menambahkan CSS
Kita mulai dengan membuat CSS untuk animasinya. Animasi ini akan berlangsung selama 3 detik, disebut "slidein", ulangi 3 kali, dan berganti arah setiap kali. Di
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
_1, lebar dan margin kiri dimanipulasi untuk membuat elemen meluncur melintasi layarp {
animation: 3s infinite alternate slidein;
}
_6Menambahkan pendengar acara animasi
Kami akan menggunakan kode JavaScript untuk mendengarkan ketiga kemungkinan peristiwa animasi. Kode ini mengonfigurasi pendengar acara kami;
p {
animation: 3s infinite alternate slidein;
}
_7Ini adalah kode yang cukup standar; . Hal terakhir yang dilakukan kode ini adalah menyetel
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
7 pada elemen yang akan kita animasikan menjadi "slidein"; Mengapa? . Jadi kita akan memulai animasi sendiri dengan menyetel kelas elemen ke gaya yang dianimasikan setelah fakta
Menerima acara
Acara dikirim ke fungsi
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
_9, yang ditunjukkan di bawah inip {
animation: 3s infinite alternate slidein;
}
_8Kode ini juga sangat sederhana. Ini melihat
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
_0 untuk menentukan jenis peristiwa animasi yang terjadi, lalu menambahkan catatan yang sesuai ke p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
1 [daftar tidak berurutan] yang kami gunakan untuk mencatat peristiwa iniOutputnya, ketika semua dikatakan dan dilakukan, terlihat seperti ini
- Dimulai. waktu berlalu adalah 0
- Loop baru dimulai pada waktu 3. 01200008392334
- Loop baru dimulai pada waktu 6. 00600004196167
- Berakhir. waktu berlalu adalah 9. 234000205993652
Perhatikan bahwa waktunya sangat dekat, tetapi tidak persis, yang diharapkan mengingat waktu yang ditetapkan saat animasi dikonfigurasi. Perhatikan juga bahwa setelah iterasi terakhir animasi, peristiwa
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
2 tidak dikirim; Demi kelengkapan, inilah HTML yang menampilkan konten halaman, termasuk daftar tempat skrip menyisipkan informasi tentang peristiwa yang diterima