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

163 lines
5.7 KiB
SCSS

@import "styles/anims";
$logo-anim-delay: 0s;
.logo {
max-width: 300px;
path, #en-square {
fill: #fff;
}
path[data-inverse] {
fill: #000;
}
.no-fill {
fill: none;
stroke: #fff;
}
*[char-outline] {
stroke: #fff;
stroke-width: 0;
}
&:not([data-noanim]) {
.arknights-kr {
$arknights-kr-anim-delay: calc(#{$logo-anim-delay} + 0s);
$delay: calc(
#{applyPlaybackSpeed(#{$arknights-kr-anim-delay})} +
#{applyPlaybackSpeed(0.05s)} * var(--order)
);
g {
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$delay} steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.8s)
#{$delay} $forceful forwards;
}
}
.endfield-kr {
$endfield-kr-anim-delay: calc(#{$logo-anim-delay} + 0.5s);
$chr1-delay: $endfield-kr-anim-delay;
.char-1 {
& > * {
opacity: 0;
}
.t-l,
.t-l-inner {
transform: translateY(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
#{$chr1-delay} steps(1) forwards,
reset-transform-y
applyPlaybackSpeed(0.7s)
#{$chr1-delay} $forceful forwards;
}
.t-r {
transform: translateX(-3px);
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
#{$chr1-delay} steps(1) forwards,
reset-transform-x
applyPlaybackSpeed(0.7s)
#{$chr1-delay} $slow-down forwards;
}
}
$movement-1-anim-delay: calc(#{$chr1-delay} + 0.2s);
.movement-1 {
transform: translateX(-10px);
opacity: 0;
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$movement-1-anim-delay} steps(1) forwards,
slide_LR
applyPlaybackSpeed(0.8s)
#{$movement-1-anim-delay} $forceful forwards;
.char-2 {
transform: translateX(-6.34px);
animation:
reset-transform-x
applyPlaybackSpeed(0.6s)
calc(#{$movement-1-anim-delay} + 0.6s) $slow-down forwards;
}
}
.char-2 .t {
transform: translateX(-6.34px);
opacity: 0;
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
calc(#{$movement-1-anim-delay} + 0.5s) steps(1) forwards,
reset-transform-x
applyPlaybackSpeed(0.6s)
calc(#{$movement-1-anim-delay} + 0.5s) $slow-down forwards;
}
$chr3-delay: calc(#{applyPlaybackSpeed($movement-1-anim-delay)} + 0.1s);
.char-3 {
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$chr3-delay} steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.8s)
#{$chr3-delay} $forceful forwards;
$sub-delay: calc(#{$chr3-delay} + 0.73s + 0.05s * var(--order));
.t-r {
transform: translateX(-3.5px);
animation:
reset-transform-x
applyPlaybackSpeed(0.5s)
#{$sub-delay} $slow-down forwards;
}
.b {
transform: translateY(-1.6px);
animation:
reset-transform-y
applyPlaybackSpeed(0.5s)
#{$sub-delay} $slow-down forwards;
}
}
$chr4-delay: calc(#{$chr3-delay} + 0.2s);
.char-4 {
opacity: 0;
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$chr4-delay} steps(1) forwards;
.b, .t {
$delay: calc(#{$chr4-delay} + 0.4s + 0.15s * var(--order));
transform: translateX(-7px);
animation:
reset-transform-x
applyPlaybackSpeed(0.5s)
#{$delay} $slow-down forwards;
}
}
$chr5-delay: calc(#{$chr4-delay} + 0.7s);
.en {
#en-square {
transform: translateX(-33px);
animation:
reset-transform-x
applyPlaybackSpeed(0.7s)
calc(#{$chr5-delay}) $slow-down forwards;
}
g {
$delay: calc(#{$chr5-delay} + 0.1s * var(--order));
transform: translateX(-10px);
animation:
reset-transform-x
applyPlaybackSpeed(0.5s)
#{$delay} $slow-down forwards;
}
}
}
}
}