Menambahkan Animasi dengan CSS
Saat teman-teman menggunakan beberapa aplikasi berbasis web, mungkin kalian sering melihat beberapa elemen yang berputar pada saat loading atau pergerakan lainnya. Itulah yang disebut animasi dan bisa kita ciptakan dengan CSS. Mari kita awali dengan membuat animasi loading yang berbentuk lingkaran dan akan berputar terus menerus.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animasi Loading</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
Kita mulai dengan membuat sebuah elemen loader. Elemen tersebut sebenarnya hanyalah sebuah div yang kita berikan CSS sehingga tampak seperti sebuah lingkaran border berwarna abu-abu dan border-top berwarna biru. Animasi pada CSS sebenarnya sama seperti video, terdiri dari beberapa frame (gambar) yang serupa namun beda posisinya. Sehingga tampak seolah-olah bergerak. Untuk mendefinisikan pergerakan tersebut, kita perlu membuat keyframes dan menambahkannya pada kode CSS seperti di bawah ini.
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}0% { transform: rotate(0deg); }: Pada frame awal (0%), elemen dimulai dengan rotasi sebesar 0 derajat (sudut).100% { transform: rotate(360deg); }: Pada frame akhir (100%), elemen selesai dengan rotasi sebesar 360 derajat, yang mengembalikan elemen ke posisi awal setelah satu putaran penuh (360 derajat).
Dari keyframes bernama spin di atas, kita dapat menyimpulkan bahwa elemen yang nanti dipasangkan keyframe tersebut akan berputar 360 derajat (putaran penuh) sebanyak satu kali. Namun hasil yang kita inginkan adalah elemen loader tersebut dapat berputar terus menerus. Kita bisa membuatnya seperti ini :
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}Pada class .loader, kita menambahkan properti animation yang isinya merupakan nama keyframes yang telah kita buat sebelumnya, diikuti dengan nilai linear yang artinya kecepatan animasi akan sama dari awal hingga akhir. Dan yang paling adalah nilai infinite untuk membuat animasi akan dijalankan secara berulang terus menerus.
Seharusnya saat ini, teman-teman sudah berhasil membuat animasi loading dengan HTML dan CSS.
Berikut adalah beberapa nilai CSS transform beserta penjelasannya :
translate(): Menggeser elemen dalam sumbu X dan/atau Y.
transform: translate(50px, 20px);rotate(): Memutar elemen sekitar titik tengahnya. Sudut rotasi diukur dalam derajat.
transform: rotate(45deg);scale(): Memperbesar atau memperkecil elemen.
transform: scale(1.5);skew(): Membengkokkan elemen dalam sumbu X dan/atau Y. Sudut skew diukur dalam derajat.
transform: skew(30deg, 20deg);Properti animation pada CSS tidak selalu dikombinasikan dengan transform, namun bisa saja dengan properti-properti lainnya seperti lebar dan tinggi sebuah elemen dan lain sebagainya.
Referensi
https://www.w3schools.com/css/css3_animations.asp https://www.w3schools.com/cssref/css3_pr_transform.php
Last updated