css3 : Cara Animasi Kotak Melayang Tanpa JS

Ketika sedang browsing terbersit gagasan untuk membuat animasi kotak melayang tanpa javascript , saya pikir itu bagus juga untuk tampilan iklan sekelebatan saat halaman pertama kali termuat, baik itu horizontal, vertikal maupun diagonal..karena memang sering banget saya melihat hal tersebut di beberapa blog bahkan website profesional dalam rangka memperkenalkan salah satu produknya atau produk orang lain. Cari perhatian para pengunjung terhadap produk yang ditawarkan itulah yang menjadi fokus tanpa harus menganggu terus menerus pengunjung dengan iklan yang kelap kelip.Methode sederhananya adalah menggunakan css animation. Tentunya banyak yang sudah biasa dengan hal tersebut. Barangkali ini bisa dijadikan inspirasi untuk membuat yang lebih bagus lagi.Gambaran dasarnya adalah awalnya dikoordinat mana yang diinginkan webmaster, mungkin dalam pikiran saya adalah sebagai berikut:

<style>

#banner {
position:absolute;
 left:0px; right:0px;
background-color:red;
padding:5px;
width:300px;
height:150px;
}
</style>

pada html-nya kira kira seperti berikut ini:
<div id="banner">text/ atau facebook kamu <p>(like,follow,atau join)</p></div>

nah, untuk kelanjutannya adalah bagaimana kotak tersebut berpindah dari posisi awalnya, tentunya diberi koordinat baru.
seperti yang terlihat adalah kotak tersebut berpindah secara horizontal.
sekarang yang menjadi percobaan berikutnya adalah berpindah possisi secara vertikal
scriptnya adalah seperti berikut ini:

berikutnya adalah diagonal
oke segitu saja yang bisa diungkapkan hari ini