114 lines
2.0 KiB
Stylus
114 lines
2.0 KiB
Stylus
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)
|
|
}
|
|
}
|
|
|
|
@keyframes img-loading-animation {
|
|
to {
|
|
transform rotate(1turn)
|
|
}
|
|
}
|
|
|
|
.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
|
|
}
|
|
}
|
|
|
|
|