CSS Transition atau Transisi adalah Efek Transis yang memungkinkan sebuah elemen secara bertahap berubah dari satu gaya ke yang lain.
<!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;
transition: 1s;
}
.container{
height: 400px;
width: 100px;
border: 0.1px solid black;
}
.container:hover .kotak{
transform: rotate(180deg);
margin-top: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="kotak"></div>
</div>
</body>
</html>
Kita gunakan transisi selama 1 detik
.kotak{
width: 100px;
height: 100px;
background-color: red;
transition: 1s;
}
Kotak yang kita buat harus dilapisi container agar perubahan gayanya bisa optimal dan tidak lupa untuk menggunakan border.
.container{
height: 400px;
width: 100px;
border: 0.1px solid black;
}
Hover terhadap container bukan kotaknya karna jika tidak pada maka transform dan transition tidak optimal
.container:hover .kotak{
transform: rotate(180deg);
margin-top: 300px;
background-color: yellow;
}
Berikut video jika hover berada pada container dan pada kotaknya saja.
Timing Function
Timing Function adalah Kurva kecepatan menentukan WAKTU yang digunakan animasi untuk mengubah dari satu set gaya CSS ke gaya lainnya.
<!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;
text-align: center;
line-height: 100px;
margin: 5px 0;
}
.container {
width: 400px;
border: 0.1px solid black;
}
.container:hover .kotak {
transform: rotate(360deg);
margin-left: 300px;
background-color: yellow;
}
.kotak1 {transition: all 3s ease;}
.kotak2 {transition: all 3s ease-in;}
.kotak3 {transition: all 3s ease-out;}
.kotak4 {transition: all 3s ease-in-out;}
.kotak5 {transition: all 3s linear;}
.kotak6 {transition: all 3s cubic-bezier(0.18, 0.89, 0.32, 1.28);}
</style>
</head>
<body>
<div class="container">
<div class="kotak kotak1">ease</div>
<div class="kotak kotak2">ease-in</div>
<div class="kotak kotak3">ease-out</div>
<div class="kotak kotak4">ease-in-out</div>
<div class="kotak kotak5">linear</div>
<div class="kotak kotak6">cubic-bezier</div>
</div>
</body>
</html>
Ini adalah nama-nama value dari timing function,
.kotak1 {transition: all 3s ease;}
.kotak2 {transition: all 3s ease-in;}
.kotak3 {transition: all 3s ease-out;}
.kotak4 {transition: all 3s ease-in-out;}
.kotak5 {transition: all 3s linear;}
.kotak6 {transition: all 3s cubic-bezier(0.18, 0.89, 0.32, 1.28);}
lalu untuk cubic bezier bisa dibilang custom transition apa yang kalian inginkan tentunya agak sedikit berbeda cara menerapkannya. berikut adalah cara untuk menerapkan cubic bezier.
Inspect lalu cari class cubic bezier setelah itu klik tanda kotak merah
Jika sudah sesuai maka kalian copy paste saja valuenya.
Delay
Delay adalah transition-delay menentukan durasi untuk menunggu sebelum memulai efek transisi properti ketika nilainya berubah
<!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;
transition: margin-left 3s, transform 3s 3s, background-color 2s 3s;
}
.container {
width: 400px;
border: 0.1px solid black;
}
.container:hover .kotak {
transform: rotate(360deg);
margin-left: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="kotak"></div>
</div>
</body>
</html>
- Transitionnya maka bergerak ke kiri 3 detik
- Transform berputar selama 3 detik setelah menunggu selama 3 detik
- background-color berubah selama 2 detik setelah menunggu selama 3 detik
.kotak {
width: 100px;
height: 100px;
background-color: red;
transition: margin-left 3s, transform 3s 3s, background-color 2s 3s;
}
Komentar
Posting Komentar