title: How to stop css animation in current position on hover?
body: <p>I have a div inside which moves another div. I need to stop <code>.block</code> at the current position when I hover on <code>.container</code>. How to do it?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="block"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
      width: 200px;
      height: 100px;
      padding: 10px;
      border: 1px solid #000;
      position: relative;
  }
  
  .block {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      animation: move 2s linear infinite;
  }
  
  @keyframes move {
      0% { left: 10px; }
      25% { left: 50px; }
      50% { left: 100px; }
      75% { left: 50px; }
      100% { left: 10px; }
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/meh6on55/">DEMO</a></p>