hexo-theme-keep/source/css/layout/common/animated.styl

transition() {
  transition: all 0.3s ease;
}


the-transition() {
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}


the-transition-ease-in() {
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  transition-delay: 0s;
}


the-transition-ease-out() {
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}


.fade-in-down-animation {
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-name: fade-in-down;
}


@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes icon-animate {
  0%, 100% {
    transform: scale(1);
  }

  10%, 30% {
    transform: scale(.88);
  }

  20%, 40%, 60%, 80% {
    transform: scale(1.08);
  }

  50%, 70% {
    transform: scale(1.08);
  }
}

.title-hover-animation {
  display: inline-block;
  position: relative;
  color: var(--second-text-color);
  border-bottom: none;
  line-height: 1.3;
  vertical-align: top;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--second-text-color);
    visibility: hidden;
    transform: scaleX(0);
    the-transition();
  }

  &:hover::before {
    visibility: visible;
    transform: scaleX(1);
  }

}