CSS
body {
background:#FDFDFD;
}
#romania {
margin:150px auto;
position: relative;
height: 400px;
width: 600px;
box-shadow: inset 200px 0px 0px blue, inset 400px 0px 0px yellow, inset 600px 0px 0px red;
}
.flagwave {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 400px;
z-index: 2;
background-image: -webkit-gradient(
linear,
0% 30%,
50% top,
color-stop(0%,rgba(204,99,40,0)),
color-stop(40%,rgba(204,99,40,0)),
color-stop(90%,rgba(204,99,40,.3)),
color-stop(100%,rgba(204,99,40,0))),
-webkit-gradient(
linear,
50% 30%,
100% top,
color-stop(0%,rgba(204,99,40,0)),
color-stop(25%,rgba(204,99,40,.3)),
color-stop(50%,rgba(204,99,40,0)),
color-stop(80%,rgba(204,99,40,.3)),
color-stop(100%,rgba(204,99,40,0)));
background-size: 200%;
background-position: right;
-webkit-animation-name: flagwave;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes flagwave {
0% {
background-position: -400px 0px, -400px 0px, -400px 0px,-400px 0px;
}
100% {
background-position: 800px 0px, 800px 0px, 800px 0px, 800px 0px;
}
}
