Tutorial belajar css # Membuat efek transisi css

Pada tutorial kali ini kita akan belajar cara membuat efek transisi pada sebuah element.
Efek transisi memungkinkan perubahan nilai pada properti tertentu sebuah element terlihat lebih smooth karena perubahannya tidak sepontan namun bertahap.
Misalnya ketika kita ingin properti height pada sebuah element terlihat smooth ketika mengalami perubahan maka kita bisa mengatur properti transition seperti berikut,

element{transition:height .5s}

Kode diatas akan mengimplementasikan efek transisi ketika properti height mengalami perubahan nilai dan durasi dari transisinya akan berjalan selama 0.5 detik dari step awal sampai step akhir.

Untuk lebih jelasnya yuk kita mulai tutorialnya,

Daftar Isi

Properti yang digunakan untuk membuat efek transisi css
Cara membuat efek transisi di css

Properti yang digunakan untuk membuat efek transisi css

Berikut properti-properti yang bisa kita gunakan untuk mengatur seperti apa transisi yang kita ingin implementasikan,

Properti	Keterangan	Nilai
transition	Digunakan untuk membuat transisi secara singkat	property duration timing-function delay \| initial \| inherit
transition-delay	Digunakan untuk mengatur jeda transisi	time \| initial \| inherit
transition-duration	Digunakan untuk mengatur durasi transisi	time \| initial \| inherit
transition-property	Digunakan untuk menentukan pada properti apa transisi di implementasikan	all \| property name
transition-timing-function	Digunakan untuk mengatur efek dan kecepatan pada setiap frame selama durasi transisi.	linear \| ease \| ease-in \| ease-out \| ease-in-out \| step-start \| step-end \| steps(int,start\|end) \| cubic-bezier(n,n,n,n) \| initial \| inherit

Cara membuat efek transisi di css

Sekarang kita coba praktik membuat efek transisi sederhana.
Sebagai contohnya, disini kita akan mencoba membuat efek zoom pada gambar ketika di sorot mouse.

Buat selector css menggunakan tag img dengan properti seperti berikut,
```
img{
   transition-duration:1s;
   transition-property:transform;
}
```
Kemudian kita buat selector pseudo class atau selector state nya berupa hover, kodenya seperti berikut,
```
img:hover{
   transform:scale(1.5)
}
```
Sehingga kode lengkapnya seperti berikut,

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> <style> img{ transition-duration:1s; transition-property:transform; } img:hover{ transform:scale(1.5) } </style> </head> <body> <img src="https://www.deretcode.com/assets/uploads/20210510/07a70ac8fe1c7008407f84872a196c0f.jpg" width="94"/> </body> </html>

Output :
Silahkan klik tombol run untuk melihat hasilnya,

Sampai disini tutorial cara membuat efek transisi menggunakan css.
Silahkan berkreasi dengan membuat efek transisi untuk properti properti lainnya, seperti color, height, position dan lain sebagainya.

Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share.
Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.

Good luck !