Pada tutorial sebelumnya,kita sudah belajar Tutorial Belajar CSS Bagian 60 : Cara Membuat Efek Animasi Dengan CSS Animation. Pada tutorial kali ini kita akan belajar tentang penggunaan @keyframes untuk mengatur animasi.
CSS @keyframes berfungsi menentukan aturan animasi yang mendefinisikan property CSS untuk elemen di setiap keadaan dengan garis waktu.
Kita dapat membuat property animasi yang kompleks dengan menggunakan @keyframes. Animasi dibuat dengan style CSS yang dapat diubah, yang dapat diulang tanpa batas beberapa kali.
Animasi sederhana bisa terdiri dari 2keyframe, sedangkan animasi kompleks memiliki beberapa keyframe.
Sintaksis
Untuk menggunakan keyframe, kita perlu membuat aturan @keyframes bersama dengan property animation-name untuk mencocokkan animasi dengan deklarasi keyframe-nya.
Ini menerima 3 nilai. Mari kita bahas masing-masing secara detail.
| Property | Nilai |
| animation-name | Ini adalah nilai yang diperlukan yang menentukan nama animasi. |
| keyframes-selector | Ini menentukan persentase bersama dengan animasi ketika keyframe muncul. Nilainya terletak antara 0% sampai 100%, dari (diberi nilai 0%), sampai (diberi nilai 100%). Persentase keyframe dapat ditulis dalam urutan apa pun karena akan ditangani sesuai urutan kemunculannya. |
| css-styles | Ini mendefinisikan satu atau lebih dari satu property style CSS. |
Jika aturan keyframe tidak menentukan status awal dan akhir animasi, maka browser akan menggunakan style elemen yang ada.
Property diabaikan karena tidak dapat dianimasikan dalam aturan bingkai utama.
Fungsi pengaturan waktu keyframe
Untuk mengontrol laju animasi, kita dapat menggunakan nilai berikut.
| Nilai | Fungsi |
| linier | Artinya laju transisi akan konstan dari awal hingga akhir. |
| ease | Artinya animasi dimulai dengan lambat, dan setelah jangka waktu tertentu, kecepatannya meningkat, dan sebelum akhir kecepatannya akan melambat lagi. |
| ease-in | Mirip dengan ease, namun animasinya berakhir dengan cepat. |
| ease-out | Ini juga mirip dengan ease, namun animasinya dimulai dengan cepat. |
Contoh 1 :
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
height:200px;
animation:contoh1 5s ease-in infinite, contoh-1-2 5s ease-in-out infinite;
border-radius:40px;
}
@keyframes contoh1
{
0% {background:red;}
50% {background:yellow; width:100px; height:100px;}
100% {background:green; width:300px; height:300px;}
}
@keyframes contoh-1-2
{
0% {transform:translate(0px) scale(1.4) rotate(80deg);}
50% {transform:translate(250px) scale(1.2) rotate(40deg);}
100% {transform:translate(350px) scale(1) rotate(0deg);}
}
</style>
</head>
<body>
<div></div>
<p> Setelah Animasi selesai, elemen kembali ke kondisi awalnya</p>
</body>
</html> Contoh 2 :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: black;
text-align: center;
}
div {
position: relative;
animation: mwp 7s infinite;
}
@keyframes mwp {
0% {
top: 500px;
width: 0px;
font-size:10px;
transform: translate(0px) scale(1.4) rotate(80deg);
}
25% {
top: 400px;
background: yellow;
font-size:20px;
width: 50px;
transform: translate(100px) scale(1.3) rotate(60deg);
}
50% {
top: 300px;
background: orange;
font-size:30px;
width: 150px;
transform: translate(200px) scale(1.2) rotate(40deg);
}
75% {
top: 200px;
background: pink;
width: 250px;
font-size:40px;
transform: translate(300px) scale(1.1) rotate(20deg);
}
100% {
top: 100px;
background: red;
font-size:50px;
width: 500px;
transform: translate(400px) scale(1) rotate(0deg);
}
}
</style>
</head>
<body>
<div>
<h1>Mbah WP</h1>
</div>
</body>
</html> Poin yang perlu diingat
Beberapa poin penting mengenai peraturan ini adalah sebagai berikut:
- Selain menggunakan nilai 0%, kita dapat menggunakan kata kunci from.
- Selain menggunakan nilai 100%, kita dapat menggunakan kata kunci to.
- Meskipun kita menggunakan kata kunci from dan to, nilai apa pun di antara kata kunci tersebut akan tetap dinyatakan dalam %.
- Untuk animasi yang valid, waktu mulai dan berakhir harus dituliskan.
- Deklarasi bisa diabaikan jika ditimpa dengan property !important
Semoga tutorial ini membantu Anda untuk memahami cara mengatur efek animasi pada elemen menggunakan CSS @keyframes.
