Cara Membuat Efek Transisi/Transitions CSS3 Pada Postingan Blog/Website

Cara Membuat Efek Transisi Pada Postingan Blog/Website, baiklah shobat efek transisi ini sangat mudah di gunakan dari pada anda harus menggunakan flas atau javascript. CSS transisi merupakan code perintah untuk membuat sebuah Tujuan/objek bergerak mengikuti code perintah untuk menghasilkan sebuah gerakan/gaya yang di berikan oleh user. berikut adalah beberapa code CSS3 yang dapat menghasilkan sebuah efek Transisi/transitions tertentu, agar efek transisi ini bisa berjalan dengan baik anda di tujukan untuk menentukan propert CSS, mengatur cepat-lambatnya/durasi kecepatan efek/gaya yang di inginkan jika hal ini tidak di atur maka efek transisi tidak akan bekerja karena masih dalam mode default yaitu "NOL" (0)

Cara Membuat Efek Transisi/Transitions CSS3 Pada Postingan Blog/Website

Sintaks CSS Transisi :

.contoh { -webkit-transition: nama_properti durasi tipe_kecepatan delay; -moz-transition: nama_properti durasi tipe_kecepatan delay; -ms-transition: nama_properti durasi tipe_kecepatan delay; -o-transition: nama_properti durasi tipe_kecepatan delay; transition: nama_properti durasi tipe_kecepatan delay; }

Keterangan Untuk Sintaks di atas
1. Nama properti ini mewakili properti yang akan di animasikan (sesuai dengan Code yang di berikan)
2. Durasi di gunakan dalam hitungan satuan detik
3. Tipe Kecepatan di gunakan untuk menentukan efek percepatan yang akan di animasi. delay dapat di gunakan untuk menerapkan waktu menunggu efek transisi itu di jalankan

Contoh Transisi Dengan Efek Widht/Melebar

Contoh Elemen yang menggunakan Transisi width / melebar !

CSS3

#transisi1 { width:120px; height:120px; background-color:#e0e0e0; border:3px solid #cc0000; padding:10px; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } #transisi1:hover { width:500px; }

Html

<div id="transisi2">Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !</div>

Contoh Transisi Berputar Efek Zoom

Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !

CSS3

#transisi2 { width:120px; height:120px; background-color:#1de9b6; border:3px solid #cc0000; padding:10px; transition:width 2s, height 2s; -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */ } #transisi2:hover { width:150px; height:150px; transform:rotate(720deg); -moz-transform:rotate(720deg); /* Firefox 4 */ -webkit-transform:rotate(720deg); /* Safari and Chrome */ -o-transform:rotate(720deg); /* Opera */ }

Html

<div id="transisi2">Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !</div>

Efek Transisi Wenggunakan Warna/Background

Contoh Elemen yang menggunakan Transisi Warna & Background!

CSS3

#colorbackground { width:90%; background:gray; color:black; border:2px solid #222; padding:15px; font:bold 20px Sans-Serif; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } #colorbackground:hover { color:white; background:black; }

Html

<div id="colorbackground">Contoh Elemen yang menggunakan Transisi Warna & Background!</div>

Nah shobat sekalian di atas adalah beberapa Cara Membuat Efek Transisi/Transitions CSS3 Pada Postingan Blog/Website, sebenarnya masih banyak efek transisi yang lain namun belum saya pelajari hanya efek transisi ini yang mungkin saya bagikan dulu.
Oky sampai ketemu lagi ya shobat di Frequenzi yang sama

SEMOGA SUKSES