CSS animation repeat without reloading
<p>I have created a div with a background image and applied css animation to it (transition left to right). (screenshot attached) <a href="http://i.stack.imgur.com/lJsfO.jpg" rel="nofollow">enter image description here</a>My question is: how can I make it play again without having to reload the page? Here is my html:</p>

<pre><code>&lt;div class="cityscape"&gt;
  &lt;div class="chef"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is my css:</p>

<pre><code>.chef {
    background-image: url("../img/chef.png");
    background-position: left bottom;
    background-size: auto 100%;
    position: absolute;
    background-repeat: no-repeat;
    width:700px;
    height:60px;
    margin-top:90px;
}
</code></pre>

<p>/<em>animated chef</em>/</p>

<pre><code>@-webkit-keyframes move
    {
        from {
        left: 0;
    }

    to {
        left: 50%;
    }
}

@keyframes move
{
    from {
        left: 0;
    }
        to {
        left: 50%;
    }

      to {
        left: 100%;
    }

}


.chef {
    padding-right: 20px;
    left: 100%;
    position: absolute;
    -webkit-animation: move 40s;
    animation: move 40s;
}

.chef img {
    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 10s ease-in-out; 
    -o-transition: all 10s ease-in-out; 
    -ms-transition: all 10s ease-in-out; 
    border-radius:60px;
    transition-duration: 10s;
    }
</code></pre>