CSS Animations

by Anton

HTML

<div id="container">
    <div id="agent"></div>
</div>

CSS

body {
    background-color: #444;
}

#container {
    position: relative;
    width: 800px;
    height: 200px;
    border: solid 1px #000;
}

#agent {
    position: absolute;
    bottom: 0;
    left: 40px;
    height: 50px;
    width: 50px;
    background-color: #fff;
    animation: hop 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes hop {
    0% { left: 50px; }
    5% { bottom: -5px; left: 40px; }
    50% { bottom: 100px; }
    95% { bottom: -5px; left: 760px; }
    100% { left: 750px; }
}