Perkenalan CSS Transisi

CSS Transisi berfungsi untuk menciptakan durasi perpindahan nilai dari sebuah titik awal tampilan menuju titik akhir tampilan. CSS Transisi lebih difokuskan pada CSS Pseudo-Classes, meskipun ternyata juga bisa diterapkan untuk mentransisikan media queries. Kita mulai dengan sebuah objek tanpa efek transisi seperti ini:

Tanpa Transisi

Dan ini adalah sebuah objek dengan efek 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, digunakan untuk menentukan kecepatan animasi dalam satuan detik.

• Tipe_Percepatan, digunakan untuk menentukan efek percepatan animasi. Efek-efek percepatan animasi dalam CSS Transisi diantaranya:

  • default
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier
• Delay, ini jika kamu ingin menerapkan waktu menunggu sebelum efek transisi dijalankan.

Contoh Penerapan Nama Properti

Di sini Saya menentukan nama_properti dengan properti color, maka efek transisi hanya akan berlaku pada properti color saja, sedangkan efek 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 menentukan durasi selama 0.4s pada objek pertama dan 5s pada objek ke dua. Coba kamu rasakan perbedaannya:

0.4s

5s

#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 memiliki kecepatan yang berbeda-beda, namun pada akhirnya mereka semua akan sampai pada titik akhir 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 menciptakan percepatan sendiri dengan batasan dimulai dari 0 sampai 1. Pengertian Cubic-Bezier selengkapnya dapat kamu baca di sini (The Art of Web) dan di sini (Wikipedia).

Contoh Penerapan Delay

Dengan menerapkan delay, maka efek animasi akan bekerja setelah beberapa waktu yang ditentukan. Di sini, Saya menerapkan delay selama 5 detik, oleh karena itu efek transisi akan dimulai setelah 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;
}