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

107 lines
3.4 KiB
SCSS

@import "styles/anims";
@import "styles/orders";
@import '../logoAnimFunc';
$logo-anim-delay: 0s;
.logo {
path, rect {
fill: #fff;
&[data-inverse] {
fill: #000;
}
}
&:not([data-noanim]) {
//#region JP-"Arknights"
$arknights-cn-anim-delay: calc(#{$logo-anim-delay} + 0s);
.arknights {
opacity: 0;
transform: translateY(-10px);
$delay: StaggeredAnimDelay($arknights-cn-anim-delay);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_UD 0.8s #{$delay} $forceful forwards;
}
//#endregion
//#region JP-"Endfield"
$endfield-cn-anim-delay: calc(#{$logo-anim-delay} + 0.5s);
#chr1,
#chr4,
#chr5,
#chr6,
#chr7 {
opacity: 0;
transform: translateY(-10px);
$delay: StaggeredAnimDelay($endfield-cn-anim-delay);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_UD 0.8s #{$delay} $forceful forwards;
}
#chr2 {
$delay: StaggeredAnimDelay($endfield-cn-anim-delay);
#chr2-t {
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_UD 0.8s #{$delay} $forceful forwards;
}
#chr2-b {
opacity: 0;
transform: translateY(10px);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_DU 0.8s #{$delay} $forceful forwards;
}
}
#chr3, #chr8 {
$delay: StaggeredAnimDelay($arknights-cn-anim-delay, 0.4s);
.main {
opacity: 0;
transform: translateY(10px);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_DU 0.8s #{$delay} $forceful forwards;
}
.sub-1, .sub-2 {
transform-origin: bottom center;
transform: scaleY(2) translateY(calc(8px));
opacity: 0;
@keyframes reset-transform {
to { transform: scaleY(1) translateY(0); }
}
animation:
reset-transform 0.5s #{$delay} $forceful forwards,
opacity_spawn 0.3s #{$delay} steps(1) forwards,
}
.sub-1 { animation-delay: calc(#{$delay} + 0.25s); }
.sub-2 { animation-delay: calc(#{$delay} + 0.3s); }
}
#chr9 {
$delay: StaggeredAnimDelay($endfield-cn-anim-delay, 0.28s);
clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);
animation:
expand_UD 0.5s #{$delay} $forceful forwards;
.a { @extend ._1}
.e1 { @extend ._2 }
.e2 { @extend ._3 }
.e3 { @extend ._4 }
.a, .e1, .e2, .e3 {
$delay: StaggeredAnimDelay($endfield-cn-anim-delay, 0.53s);
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_UD 0.8s #{$delay} $forceful forwards;
}
}
//#endregion
}
}