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.
No Comments
Leave a comment Cancel