title: CSS multiple transform to same element during different event
body: <p>I have a set of link tags that appear on page load with translate3D. This works perfectly fine. But I need the link tags to either scale on it's hover. Which doesn't work directly. </p>
  
  <hr>
  
  <p>Is there a way to achieve it with just CSS? 
  Here is the code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.linkblock {
    margin: 20% 0;
  }
  
  .hlink {
    width: 12%;
    height: 60px;
    opacity: 0;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    transition: all 0.5s ease;
  }
  
  .hlink:hover {
    transform: translate(0px, -20px);
    color: red;
    background: rgba(0, 0, 0, 0.6)
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .fadeInUp {
    animation: fadeInUp 0.3s ease-in both;
  }
  
  .linkblock a:nth-child(1) {
    animation-delay: 1.0s;
  }
  
  .linkblock a:nth-child(2) {
    animation-delay: 1.1s;
  }
  
  .linkblock a:nth-child(3) {
    animation-delay: 1.2s;
  }
  
  .linkblock a:nth-child(4) {
    animation-delay: 1.3s;
  }
  
  .linkblock a:nth-child(5) {
    animation-delay: 1.4s;
  }
  
  .linkblock a:nth-child(6) {
    animation-delay: 1.5s;
  }
  
  .linkblock a:nth-child(7) {
    animation-delay: 1.6s;
  }
  
  .linkblock a:nth-child(8) {
    animation-delay: 1.7s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="linkblock"&gt;
    &lt;a href="#" class="fadeInUp hlink"&gt;fsdfsdf&lt;/a&gt;
    &lt;a href="#" class="fadeInUp hlink"&gt;fsdfsdf&lt;/a&gt;
    &lt;a href="#" class="fadeInUp hlink"&gt;fsdfsdf&lt;/a&gt;
    &lt;a href="#" class="fadeInUp hlink"&gt;fsdfsdf&lt;/a&gt;
    &lt;a href="#" class="fadeInUp hlink"&gt;fsdfsdf&lt;/a&gt;
    &lt;a href="#" class="fadeInUp hlink"&gt;fsdfsdf&lt;/a&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>