Efek Transisi CSS3

ortega | 16.55 |

Ada dua hal yang harus kita perhatikan agar CSS3 Transisi dapat bekerja dengan baik, yaitu kita harus menentukan properti css dan menentukan durasi efek. Jika nilai durasi tidak ditentukan, maka efek transisi tidak akan berpengaruh atau tidak bekerja, karena nilainya masih default yaitu "0".

Dan cara kerjanya kita menggunakan fitur mouse-over, yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat. Dan ketika pointer mouse keluar dari atas elemen, maka bentuk elemen kembali seperti semula.


Elemen yang menggunakan CSS3 Transisi

Kode CSS diatas: :
<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
box-shadow:0 0 5px;
border:1px solid #ddd;
padding:10px;
transition:width 5s;
-moz-transition:width 5s; /* Firefox 4 */
-webkit-transition:width 5s; /* Safari and Chrome */
-o-transition:width 5s; /* Opera */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.transisi:hover
{
width:400px;
}
</style>

<div class="transisi">
Elemen yang menggunakan CSS3 Transisi</div>
Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.


Efek transisi melebar kesamping sekaligus kebawah

Kode CSS diatas: :
<style type="text/css">
div.transisi2
{
width:100px;
height:100px;
background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
box-shadow:0 0 5px;
border:1px solid #ddd;
padding:10px;
transition:width 5s;
-moz-transition:width 5s; /* Firefox 4 */
-webkit-transition:width 5s; /* Safari and Chrome */
-o-transition:width 5s; /* Opera */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.transisi2:hover
{
width:400px;
height:300px;
}
</style>

<div class="transisi2">Efek transisi melebar kesamping  sekaligus kebawah</div>
Contoh lainnya Efek transisi melebar kesamping sekaligus tinggi menyempit


Efek transisi melebar kesamping sekaligus tinggi menyempit

Kode CSS diatas: :
<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
box-shadow:0 0 5px;
border:1px solid #ddd;
padding:10px;
transition:width 5s;
-moz-transition:width 5s; /* Firefox 4 */
-webkit-transition:width 5s; /* Safari and Chrome */
-o-transition:width 5s; /* Opera */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
div.transisi3:hover
{
width:400px;
height:40px;
}
</style>

<div class="transisi3">
Efek transisi melebar kesamping  sekaligus tinggi menyempit</div>

Berikut contoh yang lain


Efek transisi membesar dan berputar

Kode CSS diatas: :
<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
box-shadow:0 0 5px;
border:1px solid #ddd;
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 */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.transisi4: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 */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>

<div class="transisi4">Efek transisi membesar dan  berputar</div>

Selamat mencoba dan Semoga bermanfaat....


source:  www.carabuatwebgratis.com

Category: ,

About GalleryBloggerTemplates.com:
GalleryBloggerTemplates.com is Free Blogger Templates Gallery. We provide Blogger templates for free. You can find about tutorials, blogger hacks, SEO optimization, tips and tricks here!