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-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}


.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);
    //transform: translateX(-20px);
    transform: translateX(20px);
  }

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

.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);
  }

}