Creativity Using CSS Keyframe Animations

Ternyata memang menarik mendalami salah satu variable CSS3 teranyar sob, yakni mengenai fungsi dari fitur CSS Keyframe. Aturan rules seadanya bisa kalian baca CSS3 keyframes Rule, penjelasan syntax coba satroni keyframe animation syntax by CSS-Tricks :-bd
Menggunakan fitur tersebut kita bisa membuat animasi warna (rainbow) dengan mudah add effect rainbow animation to the blog. Sampai slider bisa kita buat memakai CSS slider content use 100% CSS3!
Beben Koben si bloglang anu ganteng kalem tea mengeksplore satu web developer, dimana konten artikel berkategorikan CSS begitu maknyus CSS article by Design Shack. Di design shack kalian bisa mempelajari secara instant mengenai fitur² CSS3. Banyak referensi web lain yang tidak kalah gaya. Dari sana Koben akan berbagi trick memasukkan efek salju ke dalam blog.

Memakai javascript snow lumayan banyak :D Tapi sekarang dengan CSS Keyframe Animations sobat bisa membikin efek salju. Sebelum memulai ada baiknya kita mengetahui terlebih dahulu support atau tidak browse kalian. Serta kode² yang berbeda dalam penulisan! Penulisan coded alakadar tertuju untuk Mozilla, Webkit and Microsoft.

/* Keyframes */

@-keyframes XXX {

Default Browse

}

@-moz-keyframes XXX {

Mozilla Browse

}

@-webkit-keyframes XXX {

Webkit Browse

}

@-ms-keyframes XXX {

Microsoft/IE Browse

}

Lihat tuh cara penulisan syntax coded CSS, cuma bagian depannya saja yang perlu kita perhatikan ;) Kata master Joshua Johnson, apabila kepingin mengerti lebih jauh mengenai beberapa decently complex keyframe animations baca dulu ini build a pure CSS slideshow with webkit keyframes. Tahu dong Webkit variable untuk jenis browsingan apa? Kemudian Koben praktek dengan code yang sudah ada, terus menggantikan syntax coded CSS depannya saja :D

Sobat nanti akan menemukan 2 buah jenis demo Slideshow & Porthole yg mana support terhadap webkit browse dan tidak untuk mozilla :( Inilah yg terjadi pada demo tersebut jika kode-kode yg ada disadur agar support terhadap browsingan mozilla ;)) :">

He.he.he.he. :D
Sekarang mari buat efek salju menggunakan CSS Keyframe Animations. Tentunya Koben memakai kode support untuk mozilla :) yang support Webkit kan sudah ada disana ;)) Demonya disatukan dengan yg diatas saja yah.

Memasukan ke dalam template blog harus ada sedikit proses edit! Jikalau body template sobat memakai background-image, harus dihilangkan terlebih dahulu, dan gantikan dengan warna latar belakang saja (background-color) Warna yg saljunya nanti bisa terlihat lah ;) Masukkan keseluruhan bumbu ajaib ini bos!!!

body {

background-color: #5599FF;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6cdDZ9Pz2BptamDNvc9hVGlZ5eaXT1DpifIWVvPxJfymeHkGN_8Gq0GhbbusIxnJBsrYt2Qv-8d4Q6KBLPbPu6ScxKkJvXoU9yhPYxP6UN3GQjTyd_WbwFZWzxbma9cy4HOpumwNRD60/'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXwe5jUex_ptk6a5h9C9NtC7Bk4ispZ8lOsK1WN7UJIDZuATz8zwyZtGS4cRDGZbP0XTqwKfImW2dmQa9kcmr4Fa_CNGY2wAUll-aZAFmwdVVviWwW2iXBnGDQkU0bDeqDwXWlqiubMQ/'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkhmFvToZvTP3WUG-wcT4a9J0NP9hVxaOKqjIqpiWrigCvkicURx4uLQd7KBYv3zNbVUNwiuakbmK8E5fIqAMUIqDv7VjO7GNwF9azhx27_r3YAI-Ar598Ffezz8WivHjUftCsu9SwrE/');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px , 0px, 0px;}
100% {background-position: 500px 1000px, 500px 500px, 300px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-color:#b4cfe0;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Teliti lihat masukan variabel coded ke dalam syntax body!!! Rumusan kode CSS3 diatas untuk semua jenis browse :D
Thanks design shack :x
Happy keyframe \m/