Mempercantik Blog Dengan Keyframe

Mempercantik Blog Dengan Keyframe

Mempercantik Blog merupakan hal yang sangat diperlukan bagi yang suka dengan cantik-cantik. :D dan pada hari ini untuk menambah postingan, saya mau share cara untuk mempercantik tampilan blog hanya dengan keyframe saja atau hanya dengan CSS.
Selain membuat blog cantik yang pasti menggunakan keyframe ini akan menambah unik dan menarik suatu blog, kenapa? saya juga gak tahu tuh kenapa. :)
Oia efek yang ditimbulkan dengan memasang keyframe ini yaitu main-wrapper,sidebar dan lain-lain bisa muncul dari bawah atau dari atas, atau darimana saja. :p

Cara Mempercantik Blog

Salin kode CSS dibawah ini tepat di atas </style>

1. main-wrapper adalah kode CSS yang akan diberikan efek, biasanya setiap template itu berbeda-beda, tapi yang paling umum adalah main-wrapper.

#main-wrapper{
-webkit-animation:Skyin 4s;
-moz-animation:Skyin 4s;
}
@-webkit-keyframes Skyin{from{-webkit-transform:translate(0px,-1000px)}to{-webkit-transform:translate(0px,0px)}
}
@-moz-keyframes Skyin{from{-moz-transform:translate(0px,-1000px)}to{-moz-transform:translate(0px,0px)}
}

2. Sidebar-wrapper adalah CSS untuk sidebar atau widget yang akan terkena efek.

#Sidebar-wrapper {
-moz-animation:System 5s;
-webkit-animation:System 5s;
}
@-webkit-keyframes System{from{-webkit-transform:translate(0px,1000px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}
}
@-moz-keyframes System{from{-moz-transform:translate(0px,1000px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}
}

3. Comments adalah kolom komentar yang juga akan dikenai efek.

#comments
 {
-webkit-animation:System_Bar 4s;
-moz-animation:System_Bar 4s;
}
@-webkit-keyframes System_Bar{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}
}
@-moz-keyframes System_Bar{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}
}

Silahkan anda ganti #main-wrapper , #sidebar-wrapper , #comments sesuai dengan kebutuhan blog anda.
Itu saja untuk kali ini tentang mempercantik blog dengan keyframe, Semoga bermanfaat.