Fish Pot Css Animation

.fish_pot { background:url(images/bg.gif); margin:0 auto; width:800px; height:335px; position:relative;
border:1px solid #111; overflow:hidden; }
.male { position:relative; top:160px; left:440px; z-index:10; }
.fish_pot b { display:block; width:100px; height:116px; background:url(images/female1.gif) no-repeat;
position:absolute; -webkit-animation:moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
-moz-animation:moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
-o-animation:moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
animation:moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; }
@-webkit-keyframes moveX { from { left:10px; } to { left:350px; } }
@-moz-keyframes moveX { from { left:10px; } to { left:350px; } }
@-o-keyframes moveX { from { left:10px; } to { left:350px; } }
@keyframes moveX { from { left:10px; } to { left:350px; } }

@-webkit-keyframes moveY { from { top:0; } to { top:160px; } }
@-moz-keyframes moveY { from { top:0; } to { top:160px; } }
@-o-keyframes moveY { from { top:0; } to { top:160px; } }
@keyframes moveY { from { top:0; } to { top:160px; } }

<div class="fish_pot"><div class="male"><img src="images/male.gif"></div></div>

Tagged in:

• Fish Animation
• css animation
• CSS3
• Fish pot