1. CSS

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 :

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.

Comments to: Membuat efek transisi CSS

    Your email address will not be published. Required fields are marked *

    Attach images - Only PNG, JPG, JPEG and GIF are supported.