Excalibur
Info

Selamat Datang

Selamat Datang Di Blog Roy Lichtenstein- Saya Senang Anda Berada Di Sini, Dan Berharap Anda Sering Datang Kembali. Silakan Berlama - Lama Di Sini Dan Membaca Lebih Lanjut Tentang Artikel Yang Saya Susun. Ada Banyak Hal Dapat Anda Pelajari, Anda Mungkin Akan Menemukan Sesuatu Yang Menarik

Sekilas Tentang Roy

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Hacker, Desainer Atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar Dan Ingin Tau Sesuatu Yang Baru...

Social Icons

xtreme8-andinova.blogspot.com

Create Animation On Blog Title With css3 Animation

Menganimasikan blog title di template blogger dengan memanfaatkan css3 animation adalah proyek selanjutnya setelah kita buat efek warna pelangi pada hover link yang juga hanya menggunakan kode css3 animation. Yang kita maksudkan dengan posting kali ini adalah Cara membuat animasi pada blog title (nama blog) dengan menggunakan css3 animation" atau "Create Animation on Blog Title". Ada beberapa variasi animasi yang akan kita buat, silahkan anda pilih yang dirasa cocok. Animasi pertama hanya berupa pergerakan blog title kearah kanan & kiri, yang kedua disertai perubahan warna teks, yang ketiga disertai animasi membentuk sudut & perubahan warna, sedang yang ke empat ada penambahan animasi berupa gerak memutar (rotasi).
Ada 2 buah demo yang dapat anda lihat, dimana demo ini sekedar sebagai sebuah bukti bahwa tutorial ini sudah melalui uji coba pada blog. Anda jangan menggunakan kode di halaman demo karena ada perbadaan kode yang berkaitan dengan enggunaan syntax.


4 Macam Animasi Blog Title:
  1. Ada 4 kode css yang masing-masing mempunyai bentuk animasi berbeda.
  2. Anda bisa menggunakan salah satu kode css untuk membuat animasi blog title.
  3. Kode css dapat dikembangkan lagi untuk mendapatkan bentuk animasi berbeda.
  4. Gunakan browser terbaru karena css3 hanya berfungsi dengan baik di browser terbaru yang sudah mendukung css3 animation. Anda bisa download melalui menu disebelah kiri halaman blog (Download browser).

Kode CSS Animasi Blog Title-1:
@keyframes GRbt_anima{0%{transform:translate(-50px,0);}50%{transform:translate(0,0);}100%{transform:translate(50px,0);}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);}50%{-o-transform:translate(0,0);}100%{-o-transform:translate(50px,0);}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);}50%{-ms-transform:translate(0,0);}100%{-ms-transform:translate(50px,0);}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);}50%{-moz-transform:translate(0,0);}100%{-moz-transform:translate(50px,0);}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);}50%{-webkit-transform:translate(0,0);}100%{-webkit-transform:translate(50px,0);}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 4s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 4s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 4s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 4s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 4s infinite linear alternate; /* Safari and Chrome */  
}
Kode CSS Animasi Blog Title-2:
@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{transform:translate(50px,0);color:black;}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-o-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-o-transform:translate(50px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-ms-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-moz-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-webkit-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 4s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 4s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 4s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 4s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 4s infinite linear alternate; /* Safari and Chrome */  
}
Kode CSS Animasi Blog Title-3:
@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;transform:rotate(-10deg) scale(0.2);}50%{transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{transform:translate(50px,0);color:black;}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-o-transform:rotate(-10deg) scale(0.2);}50%{-o-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-o-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-o-transform:translate(50px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-ms-transform:rotate(-10deg) scale(0.2);}50%{-ms-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-ms-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-moz-transform:rotate(-10deg) scale(0.2);}50%{-moz-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-moz-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-webkit-transform:rotate(-10deg) scale(0.2);}50%{-webkit-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-webkit-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 12s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 12s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 12s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 12s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 12s infinite linear alternate; /* Safari and Chrome */  
}
Kode CSS Animasi Blog Title-4:
@keyframes GRbt_anima{0%{color:black;transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;transform:scale(0.3) rotate(375deg);}100%{color:black;transform:translate(0,0) scale(1.0);}}
@-o-keyframes GRbt_anima{0%{color:black;-o-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-o-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-o-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-o-transform:scale(0.3) rotate(375deg);}100%{color:black;-o-transform:translate(0,0) scale(1.0);}}
@-ms-keyframes GRbt_anima{0%{color:black;-ms-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-ms-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-ms-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-ms-transform:scale(0.3) rotate(375deg);}100%{color:black;-ms-transform:translate(0,0) scale(1.0);}}
@-moz-keyframes GRbt_anima{0%{color:black;-moz-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-moz-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-moz-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-moz-transform:scale(0.3) rotate(375deg);}100%{color:black;-moz-transform:translate(0,0) scale(1.0);}}
@-webkit-keyframes GRbt_anima{0%{color:black;-webkit-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-webkit-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-webkit-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-webkit-transform:scale(0.3) rotate(375deg);}100%{color:black;-webkit-transform:translate(0,0) scale(1.0);}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 8s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 8s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 8s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 8s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 8s infinite linear alternate; /* Safari and Chrome */  
}
 
 
 
Cara menyimpan Kode CSS Animasi blog title yang dibuat dengan css3 animation:
  1. Login ke Blogger.
  2. Dasbor (Dasboard).
  3. Design (Rancangan).
  4. Edit HTML.
  5. Backup Template.
  6. Cari Kode ]]></b:skin>, kemudian letakkan kode css tepat di atasnya.
  7. Klik Simpan Template (Save Template)

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)