Pengenalan Dasar Efek Transisi

Pengenalan Dasar Efek Transisi

CSS3 adalah cara termudah untuk membuat efek transisi / animasi, namun tidak semua diantara kita tahu banyak tentang efek transisi ini. Maka dari itu disini Saya akan sedikit menjelaskan tentang teknik dasar dari efek transisi dengan hanya menggunakan CSS3. Mari kita mulai


Dasar

Untuk membuat efek transisi / animasi kita membutuhkan struktur CSS seperti ini

[TARGET] [TIME] [EFFECT] [DELAY(jika dibutuhkan)]

Untuk lebih jelas lihat contoh di bawah ini

transition:background 1s linear 2s;

-o-transition:background 1s linear 2s;

-webkit-transition:background 1s linear 2s;

-moz-transition:background 1s linear 2s;

Pada contoh diatas Saya menambahkan background sebagai target transisi, jika ingin merubah semuanya Sobat hanya perlu menulis all pada target transisinya. Disini Saya menambahkan 1s yang berarti 1 detik dan Sobat juga bisa menggunakan bilangan desimal atau dalam persekian detik / millisecond. Sobat hanya perlu menulis 200ms sebagai pengganti dari 1s. Pada delay Saya menulis 2s atau bisa dibiarkan kosong. Sedangkan untuk effect Saya memilih linear, yang artinya semua transisi akan memperoleh kecepatan yang sama.

• linear : Semua transisi akan memperoleh kecepatan yang sama.
• ease-in : Lambat di awal, akan tetapi akan semakin cepat di akhir.
• ease-out : Cepat di awal, akan tetapi akan semakin lambat di akhir.
• ease-in-out : Lambat di awal dan di akhir, tetapi cepat pada pertengahan saat transisi berjalan.

Lihat contoh di bawah ini

Geser kursor pada area ini, waktu telah diatur 3 detik untuk semua transisi.

linear

ease-in

ease-in-out

ease-out

Ok, itu hanyalah contoh dasar dari efek transisi. Sekarang mari kita lanjut ke tahap berikutnya.

Menggunakan Efek Berbeda Dalam Satu Transisi

Bagaimana jika Sobat menginginkan efek transisi saat kursor masuk (area transisi) dan berbeda saat kursor keluar (area transisi). Ok, disini Sobat hanya perlu menambahkan efek transisi seperti contoh di bawah ini.

#contoh

{

transition:background 1s linear;

-o-transition:background 1s linear;

-webkit-transition:background 1s linear;

-moz-transition:background 1s linear;

background:#333;

}

#contoh:hover

{

background:#fff;

}

Pada contoh di atas transisi background diatur dalam 1 detik setelah delay dari 2 detik dengan efek linear, saat kursor masuk dan kursor keluar. Tapi jika Sobat menambahkan transisi seperti di bawah ini maka kondisi akan berubah.

#contoh

{

transition:background 1s linear;

-o-transition:background 1s linear;

-webkit-transition:background 1s linear;

-moz-transition:background 1s linear;

background:#333;

}

#contoh:hover

{

background:#fff;

transition:background 3s linear;

-o-transition:background 3s linear;

-webkit-transition:background 3s linear;

-moz-transition:background 3s linear;

}

Pada contoh di atas efek transisi diatur dalam 1 detik pada saat kursor masuk namun butuh waktu 3 detik ketika kursor keluar. Mari kita lihat contoh di bawah ini

Geser kursor pada area ini

Menggunakan efek yang sama

Menggunakan efek yang berbeda

Itu hanyalah contoh, Sobat bisa menggantinya sesuai dengan keinginan.




Cubic Bezier

cubic-bezier merupakan efek transisi yang tidak saya sebutkan pada penerapan contoh di atas, karena Saya pikir efek transisi cubic-bezier ini adalah efek transisi tingkat lanjut. Struktur efeknya seperti ini

cubic-bezier(n,.n,.n,n)

Pada penerapan struktur di atas Sobat bisa mengganti nilai n dengan nomor mulai dari 0 sampai 1. Sebagai contoh lihat efek transisi di bawah ini.

Geser kursor pada area ini

Penerapan efek

transition:all 1s cubic-bezier(.75,.63,0,.27);

-o-transition:all 1s cubic-bezier(.75,.63,0,.27);

-webkit-transition:all 1s cubic-bezier(.75,.63,0,.27);

-moz-transition:all 1s cubic-bezier(.75,.63,0,.27);

Efek transisi cubic-bezier

Untuk membuat efek transisi cubic-bezier Sobat bisa kunjungi cubic-bezier.com.

CSS3 keyframes

Dengan CSS3 keyframes Sobat bisa menciptakan efek transisi tanpa batas / infinite.

Caranya cukup mudah, pertama buat sebuah keyframes dan masukkan ke dalam CSS. Struktur untuk menciptakan keyframe seperti ini

@keyframes animationname {keyframes-selector {css-styles;}}

Kemudian untuk memasukkannya ke dalam keyframes, gunakan struktur sebagai berikut

animation:animationname time number-of-times;

• time : waktu yang dibutuhkan untuk semua efek transisi.
• number-of-times : bilangan dari waktu yang ditentukan atau gunakan infinite (tanpa batas waktu). 
• animationname : nama dari tag CSS yang digunakan untuk menciptakan keyframes.

Contoh

#animasi

{

width:100px;

background:#ff8c77;

height:100px;

position:relative;

animation:example 5s infinite;

-webkit-animation:example 5s infinite; /* Safari and Chrome */

}

@keyframes animasi

{

0% {margin-left:10px;}

100% {margin-left:50%;}

}

@-webkit-keyframes animasi /* Safari and Chrome */

{

0% {margin-left:10px;}

100% {margin-left:50%;}

}

Aku bergerak tanpa batas

Cukup sekian mengenai artikel Pengenalan Dasar Efek Transisi ini, semoga bermanfaat bagi Sobat semua.

Selamat Mencoba

Referensi : w3schools.com