mirror of
https://gitlab.com/serenetia/endpild-laman.git
synced 2025-03-15 07:55:54 +08:00
107 lines
3.4 KiB
SCSS
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
|
|
}
|
|
}
|