title: Why does my Transform snap back?
body: <p>Am trying to make my element stay in spot (after the transition). Right now, the translated location is where I want it but then my name snaps back onto the quote. Am I missing a piece of code or is there a piece of code that's making this snap back happen?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.blockquote {
    font-family: "Open Sans", Verdana, Arial, sans-serif;
    font-size: 30px;
    line-height: 60px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.16);
    /*rgba(192, 241, 247, 0.15);*/
    height: 100px;
    text-align: center;
    padding-top: 40px;
    color: white;
    font-weight: 300;
    font-style: italic;
    transition: all 250ms ease-in-out;
  }
  .blockquote .blockquote2 {
    transition: all 250ms ease-in-out;
    font-size: 25px;
    line-height: 35px;
    width: 90%;
  }
  .blockquote .author {
    display: inline;
    margin-left: -150px;
    transition: all 250ms ease-in-out;
    font-family: "Roboto", sans-serif;
    color: #838eca;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 35px;
    opacity: 0;
  }
  .blockquote:hover .blockquote2 {
    transform: translateX(-20px);
    transition: all 250ms ease-in-out;
  }
  .blockquote:hover .author {
    opacity: 1;
    font-weight: 900;
    color: rgb(25, 137, 228);
    transform: translateX(200px);
    transition: all 250ms ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="blockquote"&gt;
    &lt;div class="blockquote2"&gt; &lt;b&gt;雕刻&lt;/b&gt;自己的路
      &lt;p class="author"&gt;- Jason Zhang&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>