Animation

• index.html

      <header class="header">
         <div class="logo-box">
            <img src='./img/logo-white.png' alt='Logo' class="logo">
         </div>
         <div class='text-box'>
           <h1 class="heading-primary">
              <span class="heading-primary-main">Outdoors</span>
              <span class="heading-primary-sub">Is where life happens</span>
           </h1>
         </div>
      </header>  
  




---



• styles.css

  
  .text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; /* used for button only */
  }
  
  .heading-primary {
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
  
    /* Stops shaking of animation */
    backface-visibility: hidden;   <--------
    /* margin-bottom: 60px; */
    margin-bottom: 6rem;
  }
  
  .heading-primary-main {
    display: block;
    /* font-size: 60px; */
    font-size: 6rem;
    /* letter-spacing: 35px; */
    letter-spacing: 3.5rem;
    animation-name: moveInFromLeft;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    /* animation-delay: 3s; */
    /* animation will happen 3 times: */
    /* animation-iteration-count: 3;   */
    /* animation: moveInFromLeft 3s ease-in-out; */
  }
  
  .heading-primary-sub {
    display: block;
    /* font-size: 20px; */
    font-size: 2rem;
    /* letter-spacing: 17.4px; */
    letter-spacing: 1.75rem;
    animation: moveInFromRight 2s ease-out;
  }
  
  @keyframes moveInFromLeft {
    0% {
      opacity: 0;
      /* transform: translateX(-100px); */
      transform: translateX(-10rem);
    }
  
    /* 60% {
      transform: rotate(180deg);
    } */
  
    80% {
      /* transform: translateX(10px); */
      transform: translateX(1rem);
    }
  
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes moveInFromRight {
    0% {
      opacity: 0;
      /* transform: translateX(100px); */
      transform: translateX(10rem);
    }
  
    50% {
      /* transform: translateX(-10px); */
      transform: translateX(-1rem);
    }
  
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }