title: CSS animation with keyframes and hover
body: <p>I am making my first website and got stuck. On page load I have animation (elements come down to place) but i also have :hover scale in it. So animation now works, but when I hover it does not scale up. Result I am looking for is on page load elements come down and then when you hover on them they scale up. </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>top-header h1 {
      text-transform: capitalize;
      color:white;
      font-weight: 700;
      text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
      transition: transform, scale 2s;
      transform: translateY(-80px);
      animation: come-in 2s;
      animation-fill-mode: forwards;
  }
  
  top-header h1:hover {
      transform: scale(1.05);
  }
  
  @keyframes come-in {
      to {transform: translateY(0);}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width-device-width,initial-scale=1"&gt;
          &lt;title&gt;Li-designs&lt;/title&gt;
          &lt;meta name="description" content="Ignas Levinskas is young designer and web developer."&gt;
          &lt;link rel="stylesheet" href="css/style.css"&gt;
          &lt;link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"?&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:200,400,600,800" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          
          &lt;header&gt;
              &lt;div class="overlay"&gt;
                  &lt;top-header&gt;
                      &lt;h1&gt;Ignas Levinskas&lt;/h1&gt;
                      &lt;social-header&gt;
                       &lt;ul&gt;
                           &lt;li&gt;&lt;a href="https://www.facebook.com/Ignasbelenkacia" target="_blank"&gt;&lt;i class="fa fa-facebook" style="color:white" aria-hidden="true"&gt; &lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="https://www.instagram.com/burn_them_with_fire/" target="_blank"&gt;&lt;i class="fa fa-instagram" style="color:white" aria-hidden="true"&gt; &lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="https://www.behance.net/li-designs" target="_blank"&gt;&lt;i class="fa fa-behance" style="color:white" aria-hidden="true"&gt;   &lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                      &lt;/social-header&gt;
                  &lt;/top-header&gt;
                  &lt;cover-content&gt;
                      &lt;h1&gt;Welcome&lt;/h1&gt;
                      &lt;img src="images/logo.png" alt="Ignas Levinskas designs logo"&gt;
                  &lt;/cover-content&gt;
              &lt;/div&gt;
          &lt;/header&gt;
      &lt;main&gt;
              
      &lt;/main&gt;
          
      &lt;/body&gt;
      
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>