HTML

on page load animation

<!-- Example: -->
<style>
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  header {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1s ease-out 0s 1 slideInFromLeft;

    background: #333;
    padding: 30px;
  }
</style>

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>