SpeedTag - logo animation

by joplomacedo

HTML

<div class="logo">
  <img class="logo__part logo__part--1" src="https://svgshare.com/i/JEy.svg"/><!--
  --><img class="logo__part logo__part--2" src="https://svgshare.com/i/JEy.svg"/><!--
--><img class="logo__part logo__part--3" src="https://svgshare.com/i/JEy.svg"/>
</div>

SCSS

.logo {
  display: flex;
  font-size: 30px;
  height: 19px;
  
  $anim-duration: .23s;
  $anim-timing-function: cubic-bezier(0.405, 0.860, 0.510, 0.995);

  &__part {
    height: 100%;
    vertical-align: bottom;
    animation: logo__partAnimation $anim-duration $anim-timing-function both;
    
    &:not(:last-child) {
      margin-right: -8px;
    }

    &--1 {
      color: pink;
      animation-delay: $anim-duration * 2/3;
    }

    &--2 {
      color: orange;
      animation-delay: $anim-duration * 1/3;
    }

    &--3 {
      color: purple;
    }
  }
}



@keyframes logo__partAnimation {
  0% {
    transform: translateX(-50px);
  }

  100% {
    transform: translateX(0px);
  }
}