DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial belajar css # Membuat efek transisi css

advertisement
Membuat efek transisi css

Pada tutorial kali ini kita akan belajar cara membuat efek transisi pada elemen.
Efek transisi sama seperti efek animasi css yang sudah kita bahas pada artikel sebelumnya, bedanya hanya pada properti yang digunakan.
Pada efek animasi kita menggunakan rule @keryframes untuk membuat inisialisasi step awal dan akhir animasi, sedangkan pada efek transisi kita tidak memerlukannya.
Yuk kita mulai tutorialnya,

Properti untuk membuat efek transisi css

Seperti yang sudah dijelaskan, untuk membuat efek transisi kita tidak membutuhkan rule @keyframes.
Kita hanya akan menggunakan properti-properti css berikut,
Properti Keterangan Contoh Nilai
transition Digunakan untuk membuat transisi secara instan. display 2s
transition-delay Digunakan untuk menentukan jeda dari transisi. 2s (2 detik)
transition-duration Digunakan untuk menentukan durasi dari transisi. 3s
transition-property digunakan untuk mengatur transisi pada properti tertentu ketika berubah nilai. nama properti css
transition-timing-function Digunakan untuk mengatur efek dan kecepatan pada setiap frame selama durasi transisi. linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
Sebenarnya untuk membuat efek transisi kita cukup menggunakan properti transition, tapi jika kamu ingin mengatur nilai dan propertinya secara spesifik kalian bisa menggunakan tabel properti diatas.

Membuat efek transisi di css

Sekarang kita coba praktik membuat efek transisi sederhana.
Sebagai contohnya, disini kita akan mencoba membuat efek zoom pada gambar ketika di sorot mouse.
  1. Buat selector css menggunakan tag img dengan properti seperti berikut,
    img{
       transition-duration:1s; /*Mengatur durasi transisi dari awal sampai akhir*/
       animation-properti:width; /* Menentukan bahwa efek transisi untuk propeti width */
    }
  2. Kemudian kita buat selector state nya berupa hover, kodenya seperti berikut,
    img:hover{
       width:calc(99px * 2) /* membuat dua kali pembesaran gambar
    }
  3. Sehingga kode akhirnya seperti berikut,
    <!DOCTYPE html>
    <html lang="en">
       <head>
          <title>Deretcode.com</title>
          <style>
             img{
             transition-duration:1s;
             transition-property:width;
             }
             img:hover{
             width:calc(99px * 2)
             }
          </style>
       </head>
       <body>
          <img src="car.png" width="94"/>
       </body>
    </html>
  4. Jika kita buka di browser maka hasilnya seperti berikut,


Sampai disini tutorial cara membuat efek transisi menggunakan css. 
Silahkan kalian berkreasi sendiri dengan membuat efek transisi untuk properti properti lainnya, seperti color, height, position dan lain sebagainya.
Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share. 
Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.
Good luck !
advertisement



0 Komentar untuk " Tutorial belajar css # Membuat efek transisi css"

Silahkan berkomentar dengan baik dan bijak!