Perkenalan Css Transisi

CSS Transisi berfungsi untuk membuat durasi perpindahan nilai dari sebuah titik awal tampilan menuju titik final tampilan. CSS Transisi lebih difokuskan pada CSS Pseudo-Classes, meskipun ternyata juga sanggup diterapkan untuk mentransisikan media queries. Kita mulai dengan sebuah objek tanpa imbas transisi ibarat ini:

Tanpa Transisi

Dan ini ialah sebuah objek dengan imbas transisi:

Dengan Transisi

Sintaks CSS Transisi

div {   -webkit-transition: nama_properti durasi tipe_percepatan delay;   -moz-transition: nama_properti durasi tipe_percepatan delay;   -ms-transition: nama_properti durasi tipe_percepatan delay;   -o-transition: nama_properti durasi tipe_percepatan delay;   transition: nama_properti durasi tipe_percepatan delay; }

Nama_Properti, ini mewakili properti yang akan dianimasikan.
Durasi, dipakai untuk memilih kecepatan animasi dalam satuan detik.
Tipe_Percepatan, dipakai untuk memilih imbas percepatan animasi. Efek-efek percepatan animasi dalam CSS Transisi diantaranya:
- default
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier
Delay, ini jikalau kau ingin menerapkan waktu menunggu sebelum imbas transisi dijalankan.

Contoh Penerapan Nama Properti

Di sini Saya memilih nama_properti dengan properti color, maka imbas transisi hanya akan berlaku pada properti color saja, sedangkan imbas perpindahan warna background tidak ikut ditransisikan:

Transisi pada Warna Huruf Saja

#contoh11 {   width:200px;   background:green;   color:black;   border:2px solid #222;   padding:15px;   font:bold 20px Sans-Serif;   -webkit-transition: color 1s ease-out;   -moz-transition: color 1s ease-out;   -ms-transition: color 1s ease-out;   -o-transition: color 1s ease-out; }  #contoh11:hover {   color:white;   background:black; }

Contoh Penerapan Durasi Transisi

Di sini Saya memilih durasi selama 0.4s pada objek pertama dan 5s pada objek ke dua. Coba kau rasakan perbedaannya:

0.4s

#contoh12, #contoh13 {   width:200px;   background:gray;   color:black;   border:2px solid #222;   padding:15px;   font:bold 20px Sans-Serif; }  #contoh12 {   -webkit-transition: all 0.4s ease-out;   -moz-transition: all 0.4s ease-out;   -ms-transition: all 0.4s ease-out;   -o-transition: all 0.4s ease-out;   transition: all 0.4s ease-out; }  #contoh13 {   -webkit-transition: all 5s ease-out;   -moz-transition: all 5s ease-out;   -ms-transition: all 5s ease-out;   -o-transition: all 5s ease-out;   transition: all 5s ease-out; }  #contoh12:hover, #contoh13:hover {   color:white;   background:black; }

Contoh Penerapan Tipe Percepatan

Di sini Saya telah menerapkan tipe-tipe percepatan pada masing-masing objek sesuai dengan namanya. Coba perhatikan perbedaan percepatannya:

default

linear

ease-in

ease-out

ease-in-out

cubic-bezier(0,1,1,0)

cubic-bezier(1,0,0,1)

Dan, meskipun semua objek tampak mempunyai kecepatan yang berbeda-beda, namun pada balasannya mereka semua akan hingga pada titik final dalam waktu yang sama. Itulah yang dimaksud dengan percepatan. Hanya langkah animasinya saja yang berbeda, namun tidak pada waktunya tempuhnya.

Cubic-Bezier memungkinkan kita untuk membuat percepatan sendiri dengan batasan dimulai dari 0 hingga 1. Pengertian Cubic-Bezier selengkapnya sanggup kau baca di sini (The Art of Web) dan di sini (Wikipedia).

Contoh Penerapan Delay

Dengan menerapkan delay, maka imbas animasi akan bekerja sehabis beberapa waktu yang ditentukan. Di sini, Saya menerapkan delay selama 5 detik, oleh alasannya itu imbas transisi akan dimulai sehabis 5 detik berlalu. Jadi, letakkan saja pointer mousemu di atas objek di bawah ini, kemudian bersabarlah selama lima detik ke depan hehe…

Efek akan bekerja 5 detik kemudian

#delaydemo {   width:180px;   padding:40px;   border:5px solid #990000;   background:orange;   color:black;   font-size:12px;   cursor:pointer;   -webkit-box-shadow:0 0 5px #000;   -moz-box-shadow:0 0 5px #000;   box-shadow:0 0 5px #000;   -webkit-transition: all 0.4s ease-out 5s;   -moz-transition: all 0.4s ease-out 5s;   -ms-transition: all 0.4s ease-out 5s;   -o-transition: all 0.4s ease-out 5s;   transition: all 0.4s ease-out 5s; }  #delaydemo:hover {   background:darkorange;   border-width:0px;   color:#990000;   padding:100px;   font-size:20px;   -webkit-box-shadow:0 0 0 #000;   -moz-box-shadow:0 0 0 #000;   box-shadow:0 0 0 #000;   -webkit-border-radius:100px;   -moz-border-radius:100px;   border-radius:100px;   -webkit-transform:rotate(360deg);   -moz-transform:rotate(360deg);   -ms-transform:rotate(360deg);   -o-transform:rotate(360deg);   transform:rotate(360deg); }

Lebih Spesifik

#contoh1 {   /* Safari dan Chrome */   -webkit-transition-property:width;   -webkit-transition-duration:1s;   -webkit-transition-timing-function:linear;   -webkit-transition-delay:2s;   /* Firefox 4 */   -moz-transition-property:width;   -moz-transition-duration:1s;   -moz-transition-timing-function:linear;   -moz-transition-delay:2s;   /* IE 10+ */   -ms-transition-property:width;   -ms-transition-duration:1s;   -ms-transition-timing-function:linear;   -ms-transition-delay:2s;   /* Opera */   -o-transition-property:width;   -o-transition-duration:1s;   -o-transition-timing-function:linear;   -o-transition-delay:2s;   /* Standar W3C */   transition-property:width;   transition-duration:1s;   transition-timing-function:linear;   transition-delay:2s; }

Contoh Transisi Universal

*:link, *:visited, *:hover, *:active, *:focus {   -webkit-transition:color .25s linear, background-color .25s linear, border-color .25s linear;   -moz-transition:color .25s linear, background-color .25s linear, border-color .25s linear;   -ms-transition:color .25s linear, background-color .25s linear, border-color .25s linear;   -o-transition:color .25s linear, background-color .25s linear, border-color .25s linear;   transition:color .25s linear, background-color .25s linear, border-color .25s linear; }

Sumber https://www.dte.web.id/