title: CSS Slide effect into container
body: <p>I'd like to get this effect:</p>
  
  <p><a href="https://i.stack.imgur.com/bnIYA.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bnIYA.gif" alt="enter image description here"></a></p>
  
  <p>But I cant move only the content, leaving fixed the container. If you see my fiddle, I'm moving all together, the content and the container.
  And even I'd like to put the hover on the circle div, not in the content like it is right now, because now when the animation ends it losing the hover.</p>
  
  <h2>A little detail to keep in mind:</h2>
  
  <ul>
  <li>I need to update at runtime the text to display due it should be
  translated depending on the language selected by the user.</li>
  </ul>
  
  <p>Here is my <a href="http://codepen.io/facundo_larocca/pen/WRvoBZ" rel="nofollow noreferrer">fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.frame {
    display: flex;
    background-color: green;
    height: 200px;
    width: 200px;
    flex-direction: center;
    justify-content: center;
    align-items: center;
  }
  
  .oval {
    display: flex;
    background-color: white;
    border-radius: 50px;
    width: 100px;
    height: 100px;
  }
  
  .box {
    display: flex;
    flex-direction: column;
    background-color: gray;
    height: 100px;
    width: 100px;
    position: relative;
    top: 25px;
    transition: top 200ms ease-in;
    border-radius: 50px;
  }
  
  .box:hover {
    top: -50px;
    transition: top 200ms ease-in;
    animation: ticker 25s cubic-bezier(1, 0, .5, 0);
  }
  
  @keyframes  ticker {
    0% {
      margin-top: 0
    }
    25% {
      margin-top: -30px
    }
    50% {
      margin-top: -60px
    }
    75% {
      margin-top: -90px
    }
    100% {
      margin-top: 0
    }
  }
  
  .box-inn {
    flex: 1;
    margin: 5%;
    color: white;
    text-align: center;
    align-items: center;
  }
  
  .first {
    background-color: blue;
  }
  
  .second {
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="frame"&gt;
    &lt;div class="oval"&gt;
      &lt;div class="box"&gt;
        &lt;div class="box-inn first"&gt;
          Text 1
        &lt;/div&gt;
        &lt;div class="box-inn second"&gt;
          Text 2
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>