Stylus FadeUp Animation Utility Template
マルチクラスでdurationとdelayの値を調整できるstylusのCSS animation テンプレート
.f-animation_anim-fadeup
opacity 0
animation-name fadeUp
animation-fill-mode forwards
for num in (1..100)
&.is-delay-{num}
animation-delay (num * 0.1)s
for num in (1..100)
&.is-duration-{num}
animation-duration (num * 0.1)s
@keyframes fadeUp
0%
opacity 0
transform translateY(10px)
100%
opacity 1
transform translateY(0px)