endpild-laman/components/logo/MountainContour/MountainContour.module.scss
AmaneSerenetia 1104b76e46 first commit
2024-01-22 20:52:38 +09:00

58 lines
1.8 KiB
SCSS

@import "styles/anims";
.wing {
transform-origin: 26.2px 31.5px;
}
.MCLogo {
aspect-ratio: 124 / 47;
path {
fill: #fff;
&[data-inverse] {
fill: #000;
}
}
&:not([data-noanim])
{
transform: translateX(-25%);
animation: reset-transform 0.8s 0.5s $forceful forwards;
--icon-anim-delay: 1.52s;
#dragonfly {
transform: translate(28px, 20px);
animation: reset-transform 0.8s var(--icon-anim-delay) $slow-down forwards;
.wing {
animation: reset-rotate 0.8s calc(var(--icon-anim-delay) + 0.3s) $slow-down forwards;
}
#l-wing-main { transform: rotate(-15deg) }
#l-wing-sub { transform: rotate(-8deg) }
#r-wing-main { transform: rotate(15deg) }
#r-wing-sub { transform: rotate(8deg) }
}
#particles path {
transform: translateX(5px);
opacity: 0;
animation:
reset-transform 0.8s calc(var(--icon-anim-delay) + 0.1s) $slow-down forwards,
opacity_spawn 0s calc(var(--icon-anim-delay) + 0.55s + var(--order) * 0.08s) steps(1) forwards;
}
--text-anim-delay: 1.47s;
#txt-mt {
transform: translateX(6px);
opacity: 0;
animation:
opacity_spawn 0s calc(var(--text-anim-delay) + 0.4s) steps(1) forwards,
slide_RL 0.7s var(--text-anim-delay) $forceful forwards;
}
#txt-ct {
transform: translateX(6px);
opacity: 0;
animation:
opacity_spawn 0s calc(var(--text-anim-delay) + 0.05s + 0.4s) steps(1) forwards,
slide_RL 0.7s calc(var(--text-anim-delay) + 0.1s) $forceful forwards;
}
}
}