Animasi Sederhana dengan Css Transisi

Animasi atau pergerakan dalam konten di sebuah blog akan jauh lebih banyak menarik perhatian pengunjung, ketimbang kontent yang diam atau statis. Salah satu cara yang paling sederhana dan mudah untuk menambahkan effek animasi atau pergerakan adalah dengan menggunakan css transisi.
Meskipun dalam css sendiri kita sudah bisa membuat animasi secara langsung dengan menggunakan @keyframe. Bila dibandingkan dengan animasi menggunakan Keyframe, animasi menggunakan transisi(Transition) css lebih efektif untuk digunakan dalam effect hover.

Bosen dengan font web atau blog kamu? ganti aja fontnya, untuk tutorialnya bisa dilihat disini. Kali ini saya akan memberikan tutorial sekalian penjelasan singkat mengenai effect animasi sederhana menggunakan css transisi. Transisi dalam css adalah waktu(timing) yang digunakan untuk merubah style dalam element, contoh penulisan kode css nya seperti berikut;

#idname
{
    transition: all 0.5s ease 1s;
}

Keterangan:
  Kode yang berwarna merah(0.5s) adalah waktu yang dibutuhkan untuk melakukan perubahan style(animasi).
  Sedangkan Kode yang berwarna biru(1s) adalah jeda waktu(delay) yang digunakan sebelum mulai animasi.

Kode transisi tersebut akan berguna jika ada kode style pendukung lainnya yang ada dalam kondisi normal dan dalam kondisi hover, seperti width untuk membuat animasi lebar, color untuk warna dan sebagainya.

 
Dalam demo berikut bisa dilihat perubahan warna pada kotak yang menggunakan css tanpa transisi akan terjadi langsung, sementara yang menggunakan transisi terjadi secara bertahap (halus).

Coba lihat demo ini (Arahkan kursor ke kotak) :
Demo sederhana dalam effect hover (tanpa transition):

Kotak1

Demo sederhana dalam effect hover (dengan transition):

Kotak2

berikut adalah kode yang saya gunakan untuk membuat demo diatas,

.akotakind{
color: white;
padding: 20px;
width:auto;
background: red;
transition: all 0.7s ease 0s;
}

.akotakind:hover{
width: 100px;
background:black;
}

         Coba kamu perhatikan demo dan script diatas, script atau kode css yang berwarna kuning adalah transition yang digunakan dalam css tersebut, dan kode berwarna merah adalah perubahaan yang terjadi saat hover. Transisi yang terjadi adalah perubahan warna dan lebar secara bertahap dalam  durasi 0.7

Bisa dilihat perbedaan perubahan yang terjadi?
     yup jadi intinya transition dalam css ini sangat berguna untuk membuat effect perubahan atau animasi sederhana yang ringan, seperti pada saat hover(kursur diarahkan pada element).
Masih ada pertnyaan? Ngomen aja langsung dan kalau masih pengen otak atik lagi kodenya silahkan masuk disini.