JSFiddle - React, Tailwind, and code Playground

by Opick Kusanagi

HTML

<div id="awan">
<center>
<strong><img alt="Superhero Flat Design" border="0" src="http://4.bp.blogspot.com/-LHfYotkCosY/VY0l5z4qEiI/AAAAAAAAEQo/BtlQ6SXhfdc/s1600/Superhero%2Bflat%2Bdesign.png" style="background: transparent;" width="200" /><br>
<br>
Cloud Animation From CSS3 by Opick Weblog
</strong></center>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

#awan {
background-color:#C0DEED;
background: url(https://abs.twimg.com/images/themes/theme1/bg.png) center top repeat-x;
padding-top:10px;
padding-bottom:10px;
width: 100%;
height: 135px;
animation: awan-animasi 10s linear infinite;
-ms-animation: awan-animasi 10s linear infinite;
-moz-animation: awan-animasi 10s linear infinite;
-webkit-animation: awan-animasi 10s linear infinite;
}

strong {
    text-align:center;
    color:#444;
    font-family:'Open Sans',sans-serif;
    line-height:normal;
    font-size:14px;
}

@keyframes awan-animasi {
from {
background-position: 0 0;
}

to {
background-position: 100% 0;
};
}

@-webkit-keyframes awan-animasi {
from {
background-position: 0 0;
}

to {
background-position: 100% 0;
};
}

@-ms-keyframes awan-animasi {
from {
background-position: 0 0;
}

to {
background-position: 100% 0;
};
}

@-moz-keyframes awan-animasi {
from {
background-position: 0 0;
}

to {
background-position: 100% 0;
};
}