Memahami Dengan Mudah Bentuk Kinerja CSS Animasi - Seperti yang sudah kita ketahui, bahwa dalam membuat sebuah efek pada blog dengan menggunakan CSS animasi sebagai perintah gerak, maka objek yang kita jadikan target akan dengan mudah bergerak. Beberapa bentuk kinerja gerak yang dihasilkan oleh CSS animasi dapat Anda pelajari pada TAB NAVIGASI dibawah ini:






Berikut ini, saya akan jabarkan bentuk dan kinerja CSS animasi agar nantinya dapat dengan mudah Anda memahami saat akan membuat sebuah tutorial yang berkaitan dengan penggunaan elemen CSS animasi. Namun sebelum menerapkan efek ini, terlebih dahulu Anda harus membangun frames animasi seperti ini:


@-webkit-keyframes {...}
@-moz-keyframes {...}
@-ms-keyframes {...}
@-o-keyframes {...}
@keyframes {...}

Kemudian, cukup panggil setiap efek yang telah Anda buat ke elemen-elemen yang sudah Anda tentukan, seperti metode efek loading pembuka halaman yang menggunakan efek animasi misalnya.

Animasi effect image


Baca juga - Cara Membuat Tampilan Popular Post Dengan Slideshow



CONTOH 1 - Transformasi Translate Animasi

#text-box {
  background:#333;width:440px;
  padding:15px 20px;text-align:center;
  font:bold 50px Impact,Arial,Sans-Serif;
  color:#ccc;border-bottom:6px double #fff;
  margin:0 auto;}

@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}}

#text-box {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;}


DEMO SHOW




CONTOH 2 - Efek Yang Berbeda-beda (Durasi Animasi)
Sama seperti pada CONTOH 1, namun disini nilai pada durasi animasi yang saya bedakan, sehingga menghasilkan efek animasi yang berbeda-beda dalam satu halaman.

@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}}

#text-box1 {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;}

#text-box2 {
  -webkit-animation:aniload 1s;
  -moz-animation:aniload 1s;
  -ms-animation:aniload 1s;
  -o-animation:aniload 1s;
  animation:aniload 1s;}

#text-box3 {
  -webkit-animation:aniload 5s;
  -moz-animation:aniload 5s;
  -ms-animation:aniload 5s;
  -o-animation:aniload 5s;
  animation:aniload 5s;}

#text-box4 {
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;}

#text-box5 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;}

DEMO SHOW




CONTOH 3 - Efek Animasi Pada Warna Teks.
Disini warna teks yang akan kita jadikan sebagai target.

@-webkit-keyframes sb77-tautantext {
  0%   {color:green;}
  25%  {color:yellow;}
  50%  {color:red;}
  75%  {color:blue;}
  100% {color:orange;}}

@keyframes sb77-tautantext {
  0%   {color:green;}
  25%  {color:yellow;}
  50%  {color:red;}
  75%  {color:blue;}
  100% {color:orange;}}

#teks {
  -webkit-animation:sb77 5s;
  -moz-animation:sb77 5s;
  -ms-animation:sb77 5s;
  -o-animation:sb77 5s;
  animation:sb77 5s;}

DEMO SHOW




CONTOH 4 - Auto Sistem Highlight Effect.
Jika pada CONTOH 3, efek akan berhenti pada jarak yang sudah ditentukan maka, Tampilan animasi berikut ini, akan bekerja secara terus menerus (otomatis).

#highlight {
  font:bold 50px Impact,Arial,Sans-Serif;
  background:#333;padding:15px 20px;
  border-bottom:6px double #fff;}

<script language="javascript" type="text/javascript">
     var teks="SAHABAT BLOGGER 77"
     var speed=20

if (document.all||document.getElementById) {
     document.write('<span id="highlight">' + teks + '</span>')
     var storetext=document.getElementById? document.getElementById("highlight") :
document.all.highlight
} else document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
}
...
//selengkapnya lihat sumber artikel
</script>


DEMO SHOW

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Memahami Dengan Mudah Bentuk Kinerja CSS Animasi
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

11 komentar

  1. Saya masih belum paham dengan bentuk kinerja CSS Animasi. Ijin nyimak ya mbak biar paham.

    BalasHapus
  2. saya paling bingun sama kode2 html mbak, otak atik template duhhh ampun deh pokok e hehehe

    BalasHapus
    Balasan
    1. mungkin kurang memahami saja mbak, jadi belum terbiasa, disana saya permudah dalam penggunaan CSS animasi

      Hapus
  3. judulnya nggak sesuai nih... masa judulnya "memahami dengan mudah bentuk kinerja css animasi",

    nggak mudah... susah bos, hmm....

    BalasHapus
    Balasan
    1. padahal penerapannya sudah saya permudah loh bos, dari box sampai teks tautan sebagai target objek yang akan kita beri animasi. tetapi masih merasa susah juga iya bos, hehe..

      kita ambil contoh TEXT-BOX1
      [pre]
      <style>
      #text-box {
      background:#333;width:440px;
      padding:15px 20px;text-align:center;
      font:bold 50px Impact,Arial,Sans-Serif;
      color:#ccc;border-bottom:6px double #fff;
      margin:0 auto;}

      @-webkit-keyframes aniload {
      from {-webkit-transform:translate(0px, 1000px)}
      to {-webkit-transform:translate(0px, 0px)}}

      @-moz-keyframes aniload {
      from {-moz-transform:translate(0px, 1000px)}
      to {-moz-transform:translate(0px, 0px)}}

      @-ms-keyframes aniload {
      from {-ms-transform:translate(0px, 1000px)}
      to {-ms-transform:translate(0px, 0px)}}

      @-o-keyframes aniload {
      from {-o-transform:translate(0px, 1000px)}
      to {-o-transform:translate(0px, 0px)}}

      @keyframes aniload {
      from {transform:translate(0px, 1000px)}
      to {transform:translate(0px, 0px)}}

      #text-box {
      -webkit-animation:aniload 4s;
      -moz-animation:aniload 4s;
      -ms-animation:aniload 4s;
      -o-animation:aniload 4s;
      animation:aniload 4s;}
      </style>
      <div id="text-box">
      </div>[/pre]

      Dan hasilnya Anda bisa lihat Di Sini

      Hapus
    2. kalau menurut si bos sangat jelas ini mudah banget, camilan tiap hari gituh...
      lah bagi saya yia tetep aja butuh waktu agar terasa mudah bos, hehehe...

      Hapus
    3. iya juga sih, mungkin karena belum terbiasa aja kali bos, hehe..

      Hapus
  4. wah saya gak bisa bilang apa apa kalau udah urusan begini. hehee

    BalasHapus
  5. wah kalo masalah yang beginian saya cuma bisa geleng-geleng kepala doang mbak, gak mudeng saya mah, cuma bisa ikutan nyimak berharap bisa banyak belajar tentang dunia blogging dari mbak :)

    BalasHapus
  6. wah perlu dipelajari dulu ya mbak, soalnya saya sedikit bingung ni :D

    BalasHapus
    Balasan
    1. CSS animasi sering digunakan untuk membantu kinerja transisi, namun penggunaan animasi tanpa penambahan keyframes, efek tidak akan dapat bekerja, misalnya kita menerapkan fungsinya dalam sebuah objek hanya dengan CSS seperti ini:
      [pre]div {
      -webkit-animation:sb77 5s;
      -moz-animation:sb77 5s;
      -ms-animation:sb77 5s;
      -o-animation:sb77 5s;
      animation:sb77 5s;}[/pre]

      yang kita lakukan hanya menuliskan fungsinya saja, tetapi dengan menambahkan fungsi @keyframes-animasi, maka efek akan dapat bekerja

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK