Animasi @Keyframes Dengan CSS3 Fundamental

 Author : hadinug, 17 February, 2014, Komentar

Perkembangan teknologi CSS3 saat ini memungkinkan kita untuk membuat design sebuah halaman website lebih menarik dan atraktif. CSS  kini tidak hanya digunakan sekedar untuk melakukan hal standar seperti memberi warna, memberi garis atau border, namun lebih dari itu.


CSS bisa kita gunakan untuk membuat sebuah animasi yang kita definisikan dan memungkinkan kita untuk membuat lebih dari 1 animasi dengan CSS. Nah pada kesempatan ini saya akan menyampaikan hal dasar dan sangat fundamental bagi kita yang ingin membuat sebuah animasi dengan CSS, dengan studi kasus pembuatan animasi flash.



Secara umum untuk membuat sebuah animasi dengan CSS dapat kita definisikan dengan mendeklarasikan sebuah style animasi dengan @keyframe pada CSS3. Berikut deklarasi dasar daalam pembuatan animasi dengan CSS3


@-webkit-keyframes nama-animasi {
  /*style animasi untuk chrome dan safari*/
}
@-moz-keyframes nama-animasi {
  /*style animasi untuk mozila*/
}
@-o-keyframes nama-animasi {
  /*style animasi untuk opera*/
}
@keyframes nama-animasi {
  /*style animasi*/
}


Masing-masing browser tentunya memiliki sintak penulisan yang agak sedikit berbeda. Misal pada mozila, kita harus menambahkan prefix -moz, chrome -webkit, opera -o. Kemudian untuk memanggil animasi tersebut dalam sebuah elemen class atau id pada sebuah tag HTML, kita bisa definisikan sebagai berikut:


#animasi {
  -webkit-animation: nama-animasi 5s infinite; /* Safari 4+ */
  -moz-animation:    nama-animasi 5s infinite; /* Fx 5+ */
  -o-animation:      nama-animasi 5s infinite; /* Opera 12+ */
  animation:         nama-animasi 5s infinite; /* IE 10+ */
}


Secara umum, properti animasi pada CSS3 memiliki 7 kombinasi properti yaitu [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] . Dan secara detil animation pada CSS3 bisa kita panggil dengan berbagia cara.


.#animasi {
        animation-name: bounce;
        animation-duration: 4s;
        animation-iteration-count: 10;
        animation-direction: alternate;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
        animation-delay: 2s;
}


Berikut tabel property penggunaan animation pada CSS 3

PropertiNilai
timing-functionease, ease-out, ease-in, ease-in-out, linear,
cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
duration & delayXs or Xms
duration-countX
fill-modeforwards, backwards, both, none
animation-directionnormal, alternate

Setelah memahami sintak atau deklarasi dasar untuk pembuatan animasi pada CSS3, kita akan mencoba membuat sebuah animasi Flash. Untuk kode animasi lengkap bisa dilihat pada skrip dibawah ini atau melalui link demo berikut:


@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}	
25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;}	
25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
    0%, 50%, 100% {opacity: 1;}	
25%, 75% {opacity: 0;}
}

@keyframes flash {
    0%, 50%, 100% {opacity: 1;}	
25%, 75% {opacity: 0;}
}

.flash {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}    


 
Bagikan halaman ke sosial media
 
Tags :   css    css-keyframes    animation       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda