animations.scss

@mixin showAndHideAimation() {
  @keyframes showAndHide {
    0% {
      display: block;
      opacity: 1;
    }

    50% {
      opacity: 0;
    }

    80% {
      display: block;
    }

    100% {
      display: none;
      height: 0;
      opacity: 0;
      padding: 0;
    }
  }
}

@mixin opacitygrowAnimation() {
  @keyframes opacitygrow {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.3;
    }
    75% {
      opacity: 0.7;
    }
    100% {
      opacity: 1;
    }
  }
}

@mixin zoominAnimation() {
  @keyframes zoomin {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.2);
    }
  }
}

@mixin showhiddenAnimation {
  @keyframes showhidden {
    0% {
      visibility: hidden;
    }
    90% {
      visibility: hidden;
    }
    100% {
      visibility: visible;
    }
  }
}

@mixin heartbeatAnimation() {
  @keyframes heartbeat {
    0% {
      font-size: 3rem;
    }
    25% {
      font-size: 4.5rem;
    }
    50% {
      font-size: 6rem;
    }
    75% {
      font-size: 4.5rem;
    }
    100% {
      font-size: 3rem;
    }
  }
}