Membuat efek transisi 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. Artikel ini akan membahas bagaimana cara membuat efek transisi menggunakan CSS.

Contoh :

.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.

Alfa Adhitya Member since December 18, 2019

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