Membuat efek transisi CSS

alfa6661
- February 03, 2012
0 (0 votes)
Rate :
Bagaimana membuat efek transisi menggunakan CSS

Transisi merupakan perpindahan dari suatu tempat ke tempat lain, Membuat efek transisi bisa dilakukan dengan menggunakan CSS, tanpa harus menggunakan javascript ataupun animasi flash.

Contoh :

Sorot disini
Sorot disini
.demo1 {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari dan Chrome */
    -o-transition:width 2s; /* Opera */
}
 
.demo1:hover {
    width:300px;
}
 
.demo2 {
    width:100px;
    height:100px;
    background:red;
    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 dan Chrome */
    -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
 
.demo2:hover {
    width:120px;
    height:120px;
    transform:rotate(90deg);
    -moz-transform:rotate(90deg); /* Firefox 4 */
    -webkit-transform:rotate(90deg); /* Safari dan Chrome */
    -o-transform:rotate(90deg); /* Opera */
}

Efek transisi dapat digunakan juga pada gambar, tulisan dan element element lain pada css

Syntax

img {
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    -ms-transition:all .5s ease-out;
    -o-transition:all .5s ease-out;
    transition:all .5s ease-out;
}
 
img:hover {
    -webkit-transform:translate(0px,5px);
    -moz-transform:translate(0px,-5px);
    -ms-transform:translate(0px,-5px);
    -o-transform:translate(0px,5px);
    transform:translate(0px,-5px);
}

Syntax

img {
    -webkit-transition:opacity .5s ease-out;
    -moz-transition:opacity .5s ease-out;
    -ms-transition:opacity .5s ease-out;
    -o-transition:opacity .5s ease-out;
    transition:opacity .5s ease-out;
    opacity:0.2;
}
 
img:hover {
    opacity:1;
}

Syntax

img {
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}
 
img:hover {
    -webkit-transform:scale(1.5,1.5);
    -moz-transform:scale(1.5,1.5);
    -ms-transform:scale(1.5,1.5);
    -o-transform:scale(1.5,1.5);
    transform:scale(1.5,1.5);
}

Note : Efek transisi ini belum didukung oleh browser Internet Explorer, hanya didukung oleh browser : Firefox, Opera, Safari, Chrome.

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article