Sekarang saya dan kawan – kawan di kantor sedang mengerjakan aplikasi Mondes dan Integration milik klien kami yakni BP-Migas. Seperti biasa , saya kebagian tugas untuk mendesain tampilan (User Interface) dan User Experiece (UX) dari aplikasi ini.

Dalam desain ini saya coba mengaplikasikan penggunaan CSS3 dan coba bereksperimen dengan CSS3 transition dan kerframing. Nah ini dia yang baru!. Ternyata dengan menggunakan CSS3 kita bisa loh membuat sebuah animasi sederhana seperti yang biasa dilakukan oleh javascript, tentunya dengan coding yang jauhhh lebih simple!. Kita bisa buat button hover yang smooth, dan animasi pada saat loading page atau bahkan bisa looping sesuai kebutuhan.

Berikut beberapa petikan CSS3 transition dan keyframing :

1 ) ini yang kerframing, maksudnya kita bisa bikin animasi yang berjalan sendiri tanpa perlu interaksi dari mouse.

welcome {
background:url(../images/bg4.jpg);
padding:5px 15px 5px 10px;
color:#ffffff;
position:fixed;

left:auto;
text-align:center;

border-bottom-right-radius: 15px;
border:0px 1px 1px 1px solid #ffffff;
border-left:5px solid #f11815;

-moz-box-shadow: 0px 0px 5px #888;
-webkit-box-shadow: 0px 0px 5px #888;
-o-box-shadow: 0px 0px 5px #888;
box-shadow: 0px 0px 5px #888;

-webkit-animation: headTitle 3s ease;
-moz-animation:    headTitle 3s ease;
-o-animation:     headTitle 3s ease; /*infinite looping*/

}

@-webkit-keyframes headTitle {
0%   { opacity: 0; top:-100px;}
100% { opacity: 1; top:0px;}
}

@-moz-keyframes headTitle {
0%   { opacity: 0; top:-100px; }
100% { opacity: 1; top:0px; }
}

@-ms-keyframes headTitle {
0%   { opacity: 0; top:-100px; }
100% { opacity: 1; top:0px; }
}

2) ini untuk yang transition saya gunakan untuk button.

a.ctl00_mnHeader_1:hover {
text-decoration: none;
display:block;
background-color:#ffffff;
border-radius:5px;
padding-left:4px;
padding-right:4px;
padding-top:2px;
padding-bottom:2px;
color: #000000;

-moz-transition-property: background-color, color;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.5s;
-o-transition-property: background-color, color;
-o-transition-duration: 0.5s;
}

sebagai catatan, penggunaan teknik ini berbeda diantara beberapa browser, misalnya firefox harus menggunakan sintax -moz-, untuk opera -o- dan untuk chrome dan safari -webkit-.

 

Advertisement