Select Menu

Slider

Adsense Banner 970 x 90

Blog Archive

Footer W 2

Footer W 1

Footer W 3

Travel

Performance

‹
›

Cute

My Place

Slider

Racing

Popular Posts

Videos

@keyframes, pernah lihat tulisan itu sebelumnya? Menurut saya sediri @keyframes itu didefinisikan sebagai bingkai atau tempat yang memperlihatkan beberapa gerakan atau animasi suatu objek dengan transisi yang mulus/smooth. Satu Gerakan atau Animasi itu bisa juga disebut Frame. Mungkin jika kurang atau bahkan keliru, sobat bisa menambahkannya hihi.

Yang saya bicarakan hari ini disini adalah @keyframes tentang Css3 yang sedang nge-trend saat ini. @keyframes ini musuh bebuyutannya Jquery Animation menurut saya :P haha. Banyak keluhan sebagian masyarakat tentang Jquery Animation "kalau pakai Jquery lambat gak bro?", "wah jquery, lambat gak nih sob?" dan lain lain.

Kembali ke Topic @keyframes ini. @keyframes ini hanya support pada web Browser tertentu. Ada beberapa yang tidak bisa sama sekali web browser menggunakan Css3 @keyframes ini, diantaranya Internet Explorer dan Opera. Entah kenapa Web Browser itu tidak support css3 @keyframes ini. Untuk Mozilla Firefox bisa di bantu dengan bantuan alternatif @-moz- sedangkan Safari dan Google Chrome dibantu dengan menggunakan @-webkit-.

Lihat contoh dan langsung kodenya berikut ini :
  1. Animasi menggunakan From dan To
    2. Code Css
    div#divid{
    width:50px;
    height:50px;
    background:black;
    border:1px solid #fff;
    box-shadow:0 0 3px #000;
    position:relative;
    animation:keyname 5s infinite;
    -moz-animation:keyname 5s infinite;
    -webkit-animation:keyname 5s infinite;
    }

    @keyframes keyname
    {
    from {left:0px;}
    to {left:200px; background:red; width:100px;}
    }

    @-moz-keyframes keyname
    {
    from {left:0px;}
    to {left:200px; background:red; width:100px;}
    }

    @-webkit-keyframes keyname
    {
    from {left:0px;}
    to {left:200px; background:red; width:100px;}
    }
    HTML Code
    <div id="divid"></div>
    Preview

  2. Animasi Menggunakan Persen [%]
    3. div#divid{
    width:50px;
    height:50px;
    background:black;
    border:1px solid #fff;
    box-shadow:0 0 3px #000;
    position:relative;
    animation:keyname 5s infinite;
    -moz-animation:keyname 5s infinite;
    -webkit-animation:keyname 5s infinite;
    }

    @keyframes keyname
    {
    0% {left:0px;}
    25% {left:200px; background:#fc0;}
    50% {left:50px; background:#de0101;}
    75% {left:100px; background:#fff;}
    100% {left:0px; background:#000;}
    }

    @-moz-keyframes keyname
    {
    0% {left:0px;}
    25% {left:200px; background:#fc0;}
    50% {left:50px; background:#de0101;}
    75% {left:100px; background:#fff;}
    100% {left:0px; background:#000;}
    }

    @-webkit-keyframes keyname{
    0% {left:0px;}
    25% {left:200px; background:#fc0;}
    50% {left:50px; background:#de0101;}
    75% {left:100px; background:#fff;}
    100% {left:0px; background:#000;}
    }
    HTML Code
    <div id="divid"></div>
    Penjelasan
    • Warna Unggu adalah ID dari Animasi
    • Warna Biru adalah style dari Object yang diatas membentuk Kotak
    • Warna Oranye adalah Nama keyframe
    • Warna Merah adalah Properti animasi → infinite artinya Animasi berjalan berulang-ulang tak terhingga. Bisa di ganti dengan Angka saja, 10s artinya sepanjang perubahan animasi berjalan 10 Secon atau Detik.
    • Warna Hijau adalah kode css sebelum animasi berjalan
    • Warna Biru muda adalah css effect animasi
    • Kode Persen [%] adalah jalannya cerita Animasi
    • Kode Berkedip tidak harus dalam bentuk DIV bisa tag lainnya seperti Span, P, li, ul, ol dan lain lain
    Preview
Bisa di terapkan di blog kira kira? hehehe @keyframes ini berfungsi banyak lho, seperti animasi munculnya sesuatu atau pop-up gitu :) tapi disini hanya menyediakan trik dasar @keyframes saja :) kurang lebihnya mohon maaf, wassalam :)
- - -
Langganan: Postingan (Atom)

Copyright © 2014, Informasi Tanggamus | Distributed By Blogger Templates | Designed By Uong Jowo