Dari penelitian sebelumnya, kita mengetahui bahwa animasi transisi sederhana dapat dicapai dengan menggunakan atribut transisi, tetapi animasi transisi hanya dapat menentukan keadaan awal dan akhir. Seluruh proses dikendalikan oleh fungsi tertentu, yang tidak terlalu fleksibel. Pada bagian ini kami akan memperkenalkan animasi yang lebih kompleks - animasi.
Animasi: Mirip dengan transisi, beberapa efek dinamis dapat dicapai. Perbedaannya adalah transisi perlu dipicu ketika atribut tertentu berubah, sedangkan efek animasi dapat secara otomatis memicu efek dinamis. Untuk mengatur efek animasi, Anda harus mengatur keyframe terlebih dahulu. Keyframe mengatur setiap langkah eksekusi animasi. Format pengaturan keyframe adalah sebagai berikut:
<style>/*Define animation keyframes. Nama keyframe adalah test*/@keyframestest{/*from menunjukkan posisi awal animasi, yang juga dapat dinyatakan dengan 0%. */from{margin-left:0;}/*to menunjukkan posisi akhir animasi, yang juga dapat dinyatakan dengan 100%. */ke{margin-kiri:100%;}}</style>Animasi dalam CSS mirip dengan animasi frame-by-frame dalam flash. Animasi ini halus dan sangat fleksibel. Menggunakan animasi dalam CSS dapat menggantikan gambar dinamis, animasi Flash, atau efek khusus yang diterapkan dalam JavaScript di banyak halaman web.
Animasi adalah efek perubahan bertahap suatu elemen dari satu gaya ke gaya lainnya. Kita dapat mengubah gaya sebanyak yang kita inginkan sebanyak yang kita inginkan (jawaban yang sangat resmi).
Properti CSS3animation (animasi).
@keyframe
Dengan aturan @keyframes kita bisa membuat animasi.
Animasi dibuat dengan mengubah satu set gaya CSS secara bertahap ke set gaya CSS lainnya. Kita dapat mengubah kumpulan gaya CSS ini beberapa kali selama animasi. Tentukan waktu terjadinya perubahan dalam persentase, atau melalui kata kunci "dari" dan "ke", yang setara dengan 0% dan 100%.
0% adalah waktu mulai animasi, 100% adalah waktu berakhirnya animasi. Untuk dukungan browser terbaik kita harus selalu menentukan pemilih 0% dan 100%. Di sini 0% adalah satu frame, 50% adalah satu frame, dan 100% juga merupakan satu frame.
Terakhir, gunakan properti animasi untuk mengontrol tampilan animasi dan mengikat animasi ke pemilih
nama animasi diperlukan. Menentukan nama animasi.
pemilih bingkai utama diperlukan. Nilai hukum persentase durasi animasi: 0-100% dari (sama dengan 0%) hingga (sama dengan 100%)
gaya css diperlukan. Satu atau lebih properti gaya CSS legal
Misalnya:
@keyframesname{0%{top:0px;left:0px;background:red;}25%{top:0px;left:100px;background:blue;}50%{top:100px;le ft:100px;background:kuning;}75%{top:100px;left:0px;background:green;}100%{top:0px;left:0px;background:red;}}1. atribut nama animasi: Tetapkan nama animasi yang perlu diikat ke elemen.
Atribut nama animasi digunakan untuk mengikat animasi ke elemen HTML yang ditentukan. Nilai opsional dari atribut tersebut adalah sebagai berikut:
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;kiri:0px;}100%{top:0px;kiri :0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;</style></head><body><div ></div></tubuh></html>Hasil berjalan:
Catatan: Agar animasi berhasil diputar, Anda juga perlu menentukan atribut durasi animasi. Jika tidak, animasi tidak akan diputar karena nilai default atribut durasi animasi adalah 0.
2. atribut durasi animasi: Menentukan berapa detik atau milidetik yang diperlukan animasi untuk menyelesaikan satu siklus.
● time: Menentukan waktu yang diperlukan untuk menyelesaikan animasi. Nilai defaultnya adalah 0, yang berarti tidak ada efek animasi.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left :350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{ lebar:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;animation-duration:2s;</style></head><body><div> </div></tubuh></html>3. fungsi pengaturan waktu animasi: Fungsi matematika yang digunakan disebut kurva Bezier kubik dan kurva kecepatan. Dengan menggunakan fungsi ini, Anda dapat menggunakan nilai Anda sendiri, atau menggunakan salah satu nilai yang telah ditentukan sebelumnya.
●linear: Kecepatan animasinya sama dari awal hingga akhir;
●kemudahan: Default. Animasi dimulai dengan kecepatan rendah, kemudian dipercepat, dan diperlambat sebelum berakhir;
●ease-in: Animasi dimulai dengan kecepatan rendah;
●ease-out: Animasi berakhir dengan kecepatan rendah;
●ease-in-out: Animasi dimulai dan diakhiri dengan kecepatan rendah;
●cubic-bezier (n,n,n,n): Gunakan fungsi kubik-bezier() untuk menentukan kecepatan pemutaran animasi. Rentang nilai parameter adalah nilai antara 0 dan 1.
4. atribut animation-delay: menentukan kapan animasi dimulai.
●waktu: opsional. Menentukan waktu, dalam hitungan detik atau milidetik, untuk menunggu sebelum animasi dimulai. Nilai defaultnya adalah 0.
Catatan: Satuannya bisa berupa detik (s) atau milidetik (ms).
5. atribut animation-iteration-count: Menentukan berapa kali animasi harus diputar.
Nilai opsional untuk atribut tersebut adalah sebagai berikut:
6. atribut arah animasi: Menentukan apakah akan memutar animasi secara terbalik dalam satu lingkaran.
●normal: nilai default. Animasi diputar secara normal;
●terbalik: animasi diputar terbalik;
●Alternatif: Animasi diputar maju dalam angka ganjil (1, 2, 5...) dan mundur dalam angka genap (2, 4, 6...);
●alternate-reverse: Animasi diputar ke arah sebaliknya pada waktu ganjil (1, 3, 5...) dan ke arah depan pada waktu genap (2, 4, 6...).
7. atribut mode pengisian-animasi: Menentukan gaya yang akan diterapkan ke elemen saat animasi tidak diputar (saat animasi selesai, atau saat animasi mengalami penundaan sebelum mulai diputar).
Catatan: Secara default, animasi CSS tidak memengaruhi elemen hingga bingkai utama pertama diputar, dan berhenti memengaruhi elemen setelah bingkai utama terakhir selesai. Properti mode pengisian-animasi mengesampingkan perilaku ini.
●tidak ada nilai default. : Animasi tidak akan menerapkan gaya apa pun ke elemen target sebelum dan sesudah animasi dijalankan;
●maju: Setelah animasi berakhir (ditentukan oleh jumlah iterasi animasi), animasi akan menerapkan nilai atribut ini;
●mundur: Animasi akan menerapkan nilai properti yang ditentukan dalam bingkai utama yang memulai iterasi pertama animasi selama definisi penundaan animasi. Ini adalah nilai-nilai dalam bingkai utama dari (ketika arah animasi adalah "normal" atau "alternatif") atau dalam bingkai utama ke (ketika arah animasi adalah "terbalik" atau "terbalik-alternatif");
●Kedua animasi mengikuti aturan maju dan mundur. Artinya, animasi memperluas properti animasi di kedua arah.
8.animation-play-state: Menentukan apakah animasi sedang berjalan atau dijeda.
●paused: Menentukan untuk menjeda animasi;
●berjalan: Menentukan animasi yang sedang berjalan.
9. awal: Mengatur properti ke nilai defaultnya.
●initial: kata kunci digunakan untuk mengatur properti CSS ke nilai defaultnya;
●initial: kata kunci dapat digunakan untuk atribut CSS apa pun pada elemen HTML apa pun.
10. mewarisi: Mewarisi atribut dari elemen induk.
●mewarisi: kata kunci menentukan bahwa suatu atribut harus mewarisi nilainya dari elemen induk;
●mewarisi: kata kunci dapat digunakan untuk atribut CSS apa pun pada elemen HTML apa pun.
animasi
Atribut animasi adalah singkatan dari animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, hingga The animation atribut dapat mendefinisikan beberapa atribut di atas secara bersamaan. Format sintaksnya adalah sebagai berikut:
animasi: nama-animasi-durasi-animasi-waktu-fungsi-fungsi-animasi-penundaan-iterasi-penghitungan animasi-arah-animasi-isi-mode animasi-status bermain;
Setiap parameter sesuai dengan setiap atribut yang diperkenalkan di atas. Jika satu atau lebih nilai dihilangkan, nilai default yang sesuai dengan atribut tersebut akan digunakan.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>animasi</title><style>.box1{width:700px;height:500px;background-color:silver;}. box2{width:100px;height:100px;background-color:#bfa;margin-left:10px;/*animation-name:test;*//*animation-duration:4s;*//*animat fungsi pengaturan waktu ion:linier;*//*jumlah-iterasi-animasi:4;*//*arah-animasi:alternasi;*//*mode pengisian-animasi:mundur ;*//*animation-delay:2s;*/animation:test2slinear1s4alternate;}/*Tentukan bingkai kunci animasi, nama bingkai kunci adalah test*/@keyframestest{/*from menunjukkan posisi awal animasi, Anda juga dapat menggunakan 0% untuk mengekspresikan. */from{margin-left:50px;background-color:orange;}/*to menunjukkan posisi akhir animasi, yang juga dapat dinyatakan dengan 100%. */to{margin-left:600px;background-color: yellow;}}/*Mengontrol berjalannya animasi*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><tubuh><div><div></div></div></body></html>