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.

Tutorial animasi blog title ini dapat dipergunakan pada template blogger baru/new blogger template/blogger template designer dan template tata letak/lyout template. Setelah klik demo-1 dan demo-2, silahkan lihat animasi yang berhasil terbentuk pada blog title (nama blog) yang terletak di halaman teratas.

D E M O-1D E M O-2

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 MBanima_titwi{0%{transform:translate(-50px,0);}50%{transform:translate(0,0);}100%{transform:translate(50px,0);}}
@-o-keyframes MBanima_titwi{0%{-o-transform:translate(-50px,0);}50%{-o-transform:translate(0,0);}100%{-o-transform:translate(50px,0);}}
@-ms-keyframes MBanima_titwi{0%{-ms-transform:translate(-50px,0);}50%{-ms-transform:translate(0,0);}100%{-ms-transform:translate(50px,0);}}
@-moz-keyframes MBanima_titwi{0%{-moz-transform:translate(-50px,0);}50%{-moz-transform:translate(0,0);}100%{-moz-transform:translate(50px,0);}}
@-webkit-keyframes MBanima_titwi{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://mitrabarayaonline.blogspot.com - 30 Juni 2012 */
    animation:MBanima_titwi 4s infinite linear alternate;  /* Standart */
    -o-animation:MBanima_titwi 4s infinite linear alternate;  /* Opera */ 
    -ms-animation:MBanima_titwi 4s infinite linear alternate; /* IE */ 
    -moz-animation:MBanima_titwi 4s infinite linear alternate; /* Firefox */ 
    -webkit-animation:MBanima_titwi 4s infinite linear alternate; /* Safari and Chrome */  
}

Kode CSS Animasi Blog Title-2:

@keyframes MBanima_titwi{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 MBanima_titwi{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 MBanima_titwi{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 MBanima_titwi{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 MBanima_titwi{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://mitrabarayaonline.blogspot.com - 30 Juni 2012 */
    animation:MBanima_titwi 4s infinite linear alternate;  /* Standart */
    -o-animation:MBanima_titwi 4s infinite linear alternate;  /* Opera */ 
    -ms-animation:MBanima_titwi 4s infinite linear alternate; /* IE */ 
    -moz-animation:MBanima_titwi 4s infinite linear alternate; /* Firefox */ 
    -webkit-animation:MBanima_titwi 4s infinite linear alternate; /* Safari and Chrome */  
}

Kode CSS Animasi Blog Title-3:

@keyframes MBanima_titwi{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 MBanima_titwi{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 MBanima_titwi{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 MBanima_titwi{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 MBanima_titwi{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://mitrabarayaonline.blogspot.com - 30 Juni 2012 */
    animation:MBanima_titwi 12s infinite linear alternate;  /* Standart */
    -o-animation:MBanima_titwi 12s infinite linear alternate;  /* Opera */ 
    -ms-animation:MBanima_titwi 12s infinite linear alternate; /* IE */ 
    -moz-animation:MBanima_titwi 12s infinite linear alternate; /* Firefox */ 
    -webkit-animation:MBanima_titwi 12s infinite linear alternate; /* Safari and Chrome */  
}

Kode CSS Animasi Blog Title-4:

@keyframes MBanima_titwi{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 MBanima_titwi{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 MBanima_titwi{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 MBanima_titwi{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 MBanima_titwi{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://mitrabarayaonline.blogspot.com - 30 Juni 2012 */
    animation:MBanima_titwi 8s infinite linear alternate;  /* Standart */
    -o-animation:MBanima_titwi 8s infinite linear alternate;  /* Opera */ 
    -ms-animation:MBanima_titwi 8s infinite linear alternate; /* IE */ 
    -moz-animation:MBanima_titwi 8s infinite linear alternate; /* Firefox */ 
    -webkit-animation:MBanima_titwi 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)

Catatan/keterangan:

1. Untuk merubah warna agar sesuai dengan keinginan, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik di sini.
2. Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada Special Tutorials di menu sebelah kiri halaman.
3. Jika anda menggunakan Antarmuka Blogger Baru (New Bloogger Interface), anda dapat mengikuti panduan cara menyimpan kode css-nya melalui link berikut:
   Cara simpan kode html di New Blogger Interface
4. Anda dapat mencoba setiap bentuk animasi blog title dengan menggunakan 4 macam kode css yang telah disediakan.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu Kliwon, Juni, 30, 2012

» Happy Blogging - mitrabaraya «

Hover Link Warna Pelangi - Rainbow Color Effect with css3 Animation

Dalam bulan-bulan terakhir ini Opera telah mulai support terhadap css3. Sebuah kemajuan yang sangat menggembirakan yang mampu menggugah semangat baru untuk kembali berkarya. Yah...., selama ini sama sekali memang belum mempostingkan desain atau tutorial yang berkaitan dengan css3 animation, dimana penundaan posting tentang css3 ini karena belum semua browser besar mendukung secara penuh. Kini setelah Opera juga sudah support penuh (hanya tinggal IE yg belum mendukung css3), maka tak ada lagi kendala & hambatan untuk membuat tutorial ataupun desain yang melibatkan penggunaan css3 animation. Untuk mengawali posting tentang css3 animation, kita akan membuat sebuah efek warna pelangi pada hover teks link yang hanya menggunaakan kode css. tentu saja dalam hal ini adalah css3 animation. Bagi sobat-sobat blogger yang selama ini menggunakan javascript dan ingin merubahnya menjadi dalam kode css, silahkan ikuti tutorial berikut.

D E M O

Pertimbangan menggunakan css3 animation untuk efek pelangi pada hover teks link :

1. Semua browser telah support terhadap css3 animation.
   Bagi anda yg masih menggunakan browser lama, silahkan segera download browser terbaru yang telah mendukung css3 animation. Anda bisa membuka link download melalui menu disebelah kiri halaman blog.
2. Penggunaan css3 animation membuat kode menjadi lebih irit & ringkas, sehingga loading blog menjadi tak banyak terpengaruh.
3. Penggunaan kode css3 memudahkan blogger untuk membuat berbagai variasi warna pada efek pelangi yang ditimbulkan.
4. Penggunaan kode css3 animation lebih memudahkan blogger untuk mengembangkan berbagai efek baru (efek tambahan).

Kode CSS Hover Pelangi:

@keyframes MBhoverrainbow{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-o-keyframes MBhoverrainbow{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-ms-keyframes MBhoverrainbow{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-moz-keyframes MBhoverrainbow{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-webkit-keyframes MBhoverrainbow{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
a:hover{ /* original code by : mitrabarayaonline.blogspot.com 30 Juni 2012 */ 
 animation:MBhoverrainbow 4s infinite; /* Standart */
 -o-animation:MBhoverrainbow 4s infinite; /* Opera */
 -ms-animation:MBhoverrainbow 4s infinite; /* IE */
 -moz-animation:MBhoverrainbow 4s infinite; /* Firefox */
 -webkit-animation:MBhoverrainbow 4s infinite; /* Safari and Chrome */  
}

Cara menyimpan Kode CSS Efek pelangi pada Hover Teks Link:

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)

Catatan/keterangan:

1. Untuk merubah variasi warna hover link dapat dilakukan dengan merubah warna (black, red, brown, blue, green, orange, magenta, black) yang terdapat di kode css.
2. Jika menghendaki data warna, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik di sini.
3. Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada Special Tutorials di menu sebelah kiri halaman.
4. Jika anda menggunakan template blogger baru (New Blogger Interface), anda dapat mengikuti panduan cara menyimpan kode css-nya melalui link berikut:
   Cara simpan kode html di New Blogger Interface

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu Kliwon, Juni, 30, 2012

» Happy Blogging - mitrabaraya «