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

transition-g() {
  transition-delay 0s, 0s, 0s, 0s
  transition-timing-function ease, ease, ease, ease
  transition-duration 0.2s, 0.2s, 0.2s, 0.2s
  transition-property color, background, box-shadow, border-color
}

transition-t(property, delay, duration, function) {
  $temp-property = "color, background, box-shadow, border-color"
  $temp-delay = "0s, 0s, 0s, 0s"
  $temp-duration = "0.2s, 0.2s, 0.2s, 0.2s"
  $temp-function = "ease, ease, ease, ease"

  for p in convert(property) {
    $temp-property += ("," + p)
  }

  for d in convert(delay) {
    $temp-delay += ("," + d + "s")
  }

  for d in convert(duration) {
    $temp-duration += ("," + d + "s")
  }

  for f in convert(function) {
    $temp-function += ("," + f)
  }
  transition-delay convert($temp-delay)
  transition-timing-function convert($temp-function)
  transition-duration convert($temp-duration)

  transition-property convert($temp-property)
}


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


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

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

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

  10%
  30% {
    transform scale(0.88)
  }

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

  50%
  70% {
    transform scale(1.08)
  }
}

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

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

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