Efek Transisi Pada Elemen Blog

Bagaimana Cara Agar Sebuah ELemen Bergerak Lambat Ketika Kursor Mouse didekatkan?

Sebuah Judul Panjang yang memang sulit untuk menjelaskan sesuatu, ini karena saya mencari padanan kata yang tepat utk sebuah idiom bahasa CSS yang memang bahasa londo, yaitu efek TRANSITION.
Efek transisi ini bisa di gunakan untuk memperlambat pergerakan sebuah element yang di trigger/dipicu dengan fungsi misalnya HOVER atau funsgi FOCUS . Apa itu Hover dan fungsi FOCUS ? Hover adalah sebuah fungsi CSS untuk interaksi pergerakan MOUSE . Sedangkan Focus adalah interaksi pergerakan selain mouse,misalnya , pada layar touch screen, pada komputer yg tidak menggunakan mouse(Dengan Keyboard).
Nah setiap dua fungsi ( Hover dan Focus ) itu mendekati elemen, maka si elemen akan menampakkan sebuah pergerakan yang bisa diatur kecepatan perubahannya.
Contoh : Silahkan anda dekatkan mouse anda ke tulisan elemen berupa TULISAN dibawah ini
TULISAN INI BERGERAK MEMBESAR PERLAHAN
Bandingkan dengan tulisan dibawah ini yang tidak diatur dengan efek tranisition :
TULISAN INI BERGERAK MEMBESAR DENGAN CEPAT
Bagaimana Cara membuat Efek melambat pada tulisan itu?
Caranya sbb :
1. Anda harus tahu dulu identitas element yang akan diatur, misalnya ditulisan contoh diatas, saya telah menmbahkan identitas pada tulisan tsb, yang sebenarnya jika anda lihat dalam source code HTML, akan terlihat seperti ini :
Ini identitas untuk tulisan yang bergerak Lambat: lihat pada tulisan warna merah

<span id="contoh1" >TULISAN INI BERGERAK MEMBESAR PERLAHAN</span>

2. Setelah anda menetapkan elemen mana yang akan diatur, maka lalu tambahkan kode CSS di EDIT HTML template anda. dengan kode css dibawah ini :

#contoh1{
-webkit-transition:all 5s ease;
-moz-transition:all 5s ease;
-o-transition:all 5s ease;
transition:all 5s ease;
}
#contoh1:hover, #contoh1:focus{font-size:30px;
-webkit-transition:all 10s ease;
-moz-transition:all 10s ease;
-o-transition:all 10s ease;
transition:all 10s ease;
}

Catatan 1 : ganti tulisan merah tsb dengan identitas elemen yang ingin anda atur, misalnya anda ingin mengatur pada tulisan yang di blockquote ( Tulisan yang dalam KUTIPAN ) . Untuk blockquote, anda langsung saja tulis dengan blockquote, tanpa tanda pagar ( # )

Catatan 2 : Anda bisa juga mengatur untuk perubahan pada : warna,background,lebar dan tinggi dll, pada sebuah element .Tinggal anda tambahkan saja masing2 pengaturannya.

Catatan 3 : Efek transisi ini belum didukung oleh browser Internet Explorer, hanya didukung oleh browser besar modern. : Firefox,Opera,Safari,Chrome.

Demikian artikel Cara membuat Efek Transisi Pada Elemen Blog ini saya buat, semoga berguna untuk anda.

Tagline

• Efek Lambat pada Tulisan
• Cara memperlambat gerakan pada blog
• tulisan melambat
• Gerakan lambat saat didekati mouse
• Css untuk memperlambat elemen
• Kode CSS melambatkan tulisan
• Memperlambat gerakan di blog
• lambatin elemen di blog
• gerakannya lambat
• cara membuat gambar membesar dengan lambat
• cara membuat perubahan tulisan perlahan-lahan
• membuat background berubah perlahan
• warna berubah pelan-pelan
• melanin gerakan pada blog
• perubahan pada warna tulisan dengan perlahan
• efek pelan pada perubahan blog