Membuat effect animasi sederhana dengan css transition

       ANimasi atau pergerakan dinamis dari konten di blog kita akan menarik perhatian pengunjung jauh lebih banyak, ketimbang kontent yang diam atau statis. Karena itu kita harus menambahkan effect animasi pada blog kita agar lebih menarik dan unik lagi.

         Kaliini saya akan memberikan tutorial sekalian penjelasan effect animasi sederhana dengan transition css.
     Apa itu css mas? buat yang belum tau silahkan baca dulu disini.
Membuat animasi sederhana di blog bisa dilakukan dengan menggunakan transition css.

    Kenapa harus pake css?

Karena jika kita membuat animasi konten menggunakan javascript, blog kita akan terasa sedikit lebih berat. Oleh karena itu saya menyarankan kamu untuk menggunakan css sebagai effect animasinya.

   Ok, apa itu transition dalam css? Itu adalah perubahan effect animasi perubahan dari element.
contoh penulisan code cssnya seperti berikut

 ... {
transition: all 0.5s ease 1s;
} ... 

Keterangan:
  Kode yang berwarna merah adalah waktu transisi itu berlangsung, sedangkan Kode yang berwarna biru adalah delay mulai dari transisi itu sendiri.
    Kode tersebut membutuhkan kode pendukung lainnya seperti width untuk membuat animasi lebar dan sebagainya.
     Dalam demo berikut bisa dilihat perubahan warna pada css tanpa transisi akan terjadi langsung, sementara yang menggunakan transisi terjadi secara bertahap.
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 code yang saya gunakan untuk membuat demo diatas, silahkan copy dan ubah sesuai kebutuhan kamu.

<style>
.akotakind{
background: red;
color: white;
padding: 20px;
width:100%;
transition: all 0.7s ease 0s;
}
.akotakind:hover{
width: 100px;
background:black;
}
</style>
<div class="akotakind">
Box2</div>

         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 pastinya.

Masih ada pertnyaan? Ngomen aja langsung :D, dan sekalian biar gampang test demo css ini dengan tools kami Web trainer