Cara Membuat Efek Transition dengan CSS3

Di artikel sebelumnya kita telah bahas tentang css3 animation. Dimana di artikel tersebut kita bisa membuat pergerakan animasi yang keren tanpa javascript ataupun flash.

Di artikel ini kita akan bahas tentang css3 transition, berbeda dengan animation. Efek transition ini lebih ke perubahan property css.

Cara menggunakan transiton

Untuk membuat efek transisi, ada dua hal yang perlu kamu perhatikan. Yaitu: durasi transisi dan property yang akan berubah.

Jika kamu tidak menentukan durasi transisi, maka transisi tidak akan berjalan. Karena secara default nilai durasinya adalah 0.

Syntaxnya: transition: property1 duration1, property2 duration2, ....;

Contoh:

Arahkan mouse ke sini

<style> 
div#transisi1 {
  width: 150px;
  height: 100px;
  background: #5340ff;
  transition: width 2s;
  color:white;
  padding:10px;
  margin-bottom:30px;
}

div#transisi1:hover {
  width: 100%;
}
</style>
<div id="transisi1"> Arahkan mouse ke sini</div>

DIsitu ditentukan nilai awal width adalah 150px, dan width setelah :hover jadi 100%. Ditentukan dengan property transition:width 2s; dimana width adalah property yang berubah dan 2s adalah durasinya.

Delay

Untuk menentukan delay efek digunakan transition-delay. Contoh:

p{transition-delay:2s}

Speed curve animasi

Seperti animasi curve, dalam transition juga efeknya sama aja. Dengan menggunakna transition-timing-function. Nilainya adalah: linear, ease-in, ease, ease-in-out dan ease-out.

Efek linear

Efek ease-in

Efek ease

Efek ease-in-out

Efek ease-out

<style> 
div.kotak {
  width: 150px;
  height: 60px;
  background: #5340ff;
  transition: width 2s;
  color:white;
  padding:10px;
  margin-bottom:30px;
}

#kurva1 {transition-timing-function: linear;}
#kurva2 {transition-timing-function: ease-in;}
#kurva3 {transition-timing-function: ease;}
#kurva4 {transition-timing-function: ease-in-out;}
#kurva5 {transition-timing-function: ease-out;}
div.kotak:hover {
  width: 100%;
}
</style>
<div class="kotak" id="kurva1"> Efek linear</div>
<div class="kotak" id="kurva2"> Efek ease-in</div>
<div class="kotak" id="kurva3"> Efek ease</div>
<div class="kotak" id="kurva4"> Efek ease-in-out</div>
<div class="kotak" id="kurva5"> Efek ease-out</div>

Multiple transition

Kita bisa membuat efek transisi untuk lebih dari satu property. Contoh:

Arahkan mouse ke sini

<style> 
div#transisi2 {
  width: 150px;
  height: 100px;
  background: #5340ff;
  transition: width 2s, transform 2s;
  color:white;
  padding:10px;
  margin-bottom:30px;
}

div#transisi2:hover {
  width: 100%;
transform: rotate(180deg);
}
</style>
<div id="transisi2"> Arahkan mouse ke sini</div>

Shorthand

Contoh penulisan syntax singkat atau shorhand adalah:

div {
  transition-property: height;
  transition-duration: 2s;
  transition-timing-function: ease;
  transition-delay: 2s;
}

Dapat ditulis:

div {transition: height 2s ease 2s;

Properti CSS transisi

Berikut ini adalah tabel daftar property css transition:

Property	Keterangan
transition	Shorhand atau penulisan syntax yang singkat
transition-delay	Mengatur delay waktu transisi
transition-duration	Mengatur durasi waktu transisi
transition-property	Menentukan property apa yang diberi efek transisi
transition-timing-function	Menentukan efek curve yang digunakan

CSS3 Transition