Memahami Dengan Mudah Bentuk Kinerja CSS Animasi

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:

Ex. CSS Animasi

• Animasi Teks Jatuh
• Objek Menghilang
• Efek Rotasi Objek

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.

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