CSS3 Element bergerak ( transition ) `

bagaimanakah cara membuat link / suatu element box div anda bergerak ketika di kunjungi pointer mouse ( mouse over ) .. lalu apa itu CSS transition Efek itu .. ?

Element bergerak atau biasanya di sebut dengan transition dari CSS3, sudah banyak membantu dengan CSS3 ini seperti efek gradiasi , Efek shadow , Efek transparasi dan masih banyak lagi.namun kali ini kita akan membahas tentang element bergerak yaitu CSS3 transition  , keunikan efek css transition ini adalah ketika mouse mengarah ke link / Element  tersebut akan berubah , atau bergerak ke kiri ke kanan menurut aturan dari css tersebut,css efek transition ini bisa di terapkan pada Tulisan , link , element - element di blog anda tentunya ,property yang kita gunakan yaitu transition ,untuk browser mozilla menggunakan -moz-transition untuk opera menggunakan -o-transition safari dan Chrome menggunakan -webkit-transition

efek Transition bergerak dari kiri ke kanan ( area horizontal )

div.bergerak{width:70px;height:30px;background:Green;color:white;border:1px solid #444444;font-size:13px;margin:0;padding:5px;transiton:width 2s linear 2s;-moz-transiton:width 2s linear 2s;-webkit-transiton:width 2s linear 2s;-o-transiton:width 2s linear 2s;}
div.bergerak:hover{width:100px;}

Contoh

penulisan HTML :

<div class="bergerak">Contoh </div>

efek transition yang bergerak dan berubah

div.Transition{position:absolute;left:auto;top:auto;z-index:1;width:70px;height:30px;background:#444444;color:white;border:2px dotted #fff;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;font-size:13px;text-align:center;margin:0;padding:5px;color:#fff;transition:width 2s,height 2s,transform 2s;-moz-transition:width 2s,height 2s,-moz-transform 2s;-o-transition:width 2s,height 2s,-o-transform 2s;-webkit-transition:width 2s,height 2s,-webkit-transform 2s;}
div.Transition:hover{width:90px;height:50px;}

Dan penulisan HTML nya sebagai berikut :

<div class="Transition">Transition</div>

Transition

efek transition pada link

dengan efek transition anda bisa mengubah link bergerak ke kiri atau ke kanan secara perlahan dengan mengubah margin pada aturan css anda .


Blognya mastony

Dan kode di atas sebagai berikut :

<style> a.gerakkanan{margin:0;padding:0;color:red;text-transform:uppercase;font-size:13px;transition:all 2s;-moz-transition:all 2s;-o-transition:all 2s;-webkit-transition:all 2s;}
a.gerakkanan:hover{margin-left:15px;text-decoration:none;}</style>
<a class="gerakkanan" href="http://id-mastony.blogspot.com">Blognya mastony</a>

lalu bagaimana cara memberi efek transition pada menu navigasi ?

berikut ini adalah contoh penerapan css transition pada menu navigasi .

<style>.trans,ul.trans{margin:0;padding:0;list-style:none;width:180px;height:auto;}
ul.trans li{padding:0;list-style:none;margin:0;}
.trans a,.trans li{font-style:12px;color:white;background:#494E4A;border-left:2px outset #444444;border-bottom:2px outset #444444;;display:inline-block;position:relative;margin:0;padding:10px;width:180px;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;text-transform:capitalize;font-weight:bold;}
.trans a:hover,.trans ul li:hover{margin-left:-15px;color:#444444;background:#A2B1A7;text-decoration:none;text-shadow:-1px 2px 2px#000;}
</style>
<ul class="trans">
<li><a href="http://id-mastony.blogspot.com/2012/10/css3-efek-gradiasi-gradient.html">Efek gradient</a></li>
<li><a href="http://id-mastony.blogspot.com/2012/10/css3-efek-bayangan-shadow.html">efek shadow</a></li>
<li><a href="http://id-mastony.blogspot.com/2012/10/cara-memberi-efek-transparan.html">efek transparant</a></li></ul>

• Efek gradient
• efek shadow
• efek transparant

nah ..gimana ? ,cukup menarik bukan ? ,,
Note : untuk mengatur kecepatan ubah pada 2s semakin kecil semakin cepat contoh 1s dan untuk mengatur link bergerak ke kiri dan ke kanan ubah pada a.hover {margin-left:15px;} menjadi {margin-left:-15px;} dari sini tutorialnya tentang transition selesai ...

Terima kasih Anda telah membaca Artikel mengenai CSS3 Element bergerak ( transition ) dan Kata kunci untuk Artikel ini yaitu CSS3 Element bergerak ( transition )