SpeedTag - logo animation

Change class name on click in jQuery

by joplomacedo

HTML

<div class="logo">
  <div class="logo__part logo__part--1">></div>
  <div class="logo__part logo__part--2">></div>
  <div class="logo__part logo__part--3">></div>
</div>

SCSS

.logo {
  display: flex;
  font-size: 30px;

  &__part {
    animation: animacaoTop .3s both;

    &--1 {
      color: pink;
      animation-delay: .2s;
    }

    &--2 {
      color: orange;
      animation-delay: .1s;
    }

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



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

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