Animation
Animasi CSS adalah fitur CSS yang memungkinkan Anda menganimasikan perubahan dalam satu atau beberapa style elemen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.kotak {
width: 100px;
height: 100px;
background-color: red;
}
.kotak:hover{
animation: animasi 2s;
}
@keyframes animasi {
From{width: 100px;}
to{width: 500px; height: 500px;}
}
</style>
</head>
<body>
<div class="kotak"></div>
</body>
</html>
Tulis property CSS nya lalu beri nama animasi yang kalian inginkan lalu beri durasi selama 2 detik
.kotak:hover{
animation: animasi 2s;
}
Tulis nama animasi yang kalian berikan sebelumnya.
- From adalah awal keadaan animasi
- to adalah akhir dari animasi
Ini hanya 2 keadaan yang dianimasikan, jika kalian ingin beberapa keadaan di langkah selanjutnya
@keyframes animasi {
From{width: 100px;}
to{width: 500px; height: 500px;}
}
Maka berubah menjadi persentase.
- 0% adalah awal keadaan animasi
- 50% adalah setengah keadaan animasi
- 100% adalah akhir dari animasi
@keyframes animasi {
0%{width: 100px;}
50%{width: 300px; height:500px;}
100%{width: 500px; height: 500px;}
}
Interaction-Count
Interaction count adalah menentukan berapa kali animasi harus diputar.
Value yang terdapat pada Interaction count
- angka
- infinite
Contohnya seperti ini
- linear adalah gaya gerakan yang dianimasikan
- 2 adalah berapa kali gerakan animasi yang akan ditampilkan
- infintite adalah gerakan animasi tanpa batas hitung(opsi)
Cara seperti ini adalah cara shorthand untuk mempercepat pengerjaan
.kotak:hover{
animation: animasi 2s linear 2 /*infinite*/;
}
ini adalah cara yang bukan shorthand
/*animation-name:...;
animation-duration:...;
animation-timing-function:...;
animation-interaction-count:...;
*/
Direction
Direction mendefinisikan arah animasi. Anda dapat mengaturnya agar animasi diputar maju, mundur, atau bergantian arah setiap siklus animasi
Value yang terdapat pada direction
- Reverse
- Alternate
- Alternate-reverse
.kotak:hover{
animation: animasi 2s linear 2 reverse/*Alternate, Alternate-reverse*/;
}
Fill-Mode
Fill mode adalah menentukan gaya untuk elemen saat animasi tidak diputar (sebelum dimulai, setelah diakhiri, atau keduanya)
Value yang terdapat pada Fill mode
- Forwards
- Backwards
- Both
.kotak:hover{
animation: animasi 2s linear 3 alternate forwards/*Backwards, Both*/;
}
Play-State
Play state adalah menetapkan apakah animasi sedang berjalan atau dijeda.
Value yang terdapat pada Play state
- Running
- Paused
Disini tidak lagi menggunakan hover, jadi property animationnya pindahkan ke CSS awal. Pada play-state agak sedikit berbeda karna jika menggunakan property ini lebih optimal menggunakan javascript tetepi karna ini bagian dari animasi jadi kita masih ada cara lain untuk menggunakan property ini. Menuliskan paused tidak akan berjalan jika ditulis langsung pada source code tapi kita akan menggunakan inspect.
.kotak {
width: 100px;
height: 100px;
background-color: red;
animation: animasi 2s linear infinite alternate forwards;
}
Komentar
Posting Komentar