mirror of
https://gitlab.com/serenetia/endpild-laman.git
synced 2025-03-15 12:55:54 +08:00
95 lines
3.0 KiB
SCSS
95 lines
3.0 KiB
SCSS
|
@import 'styles/anims';
|
||
|
@import './CN-anim.module.scss';
|
||
|
@import '../logoAnimFunc';
|
||
|
|
||
|
.patch {
|
||
|
fill: #fff;
|
||
|
}
|
||
|
|
||
|
$logo-anim-delay: 0s;
|
||
|
.logo {
|
||
|
path {
|
||
|
fill: #fff;
|
||
|
&[data-inverse] {
|
||
|
fill: #000;
|
||
|
}
|
||
|
}
|
||
|
&:not([data-noanim])
|
||
|
{
|
||
|
//#region CN-"Arknights"
|
||
|
$arknights-cn-anim-delay: calc(#{$logo-anim-delay} + 0s);
|
||
|
.arknights-cn {
|
||
|
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 CN-"Endfield"
|
||
|
$endfield-cn-anim-delay: .3s;
|
||
|
@function endfieldCNAnimDelay($additionalDelay: 0s) {
|
||
|
@return StaggeredAnimDelay($endfield-cn-anim-delay, $additionalDelay);
|
||
|
}
|
||
|
.g-chr1 {
|
||
|
.chr1 {
|
||
|
opacity: 0;
|
||
|
transform: translateY(10px);
|
||
|
animation:
|
||
|
opacity_spawn
|
||
|
0.75s endfieldCNAnimDelay(.1s) steps(1) forwards,
|
||
|
slide_DU
|
||
|
1.2s endfieldCNAnimDelay(.1s) $forceful forwards;
|
||
|
}
|
||
|
#endfield-cn-chr1-stroke-tl-1 {
|
||
|
transform: translateX(-10px);
|
||
|
animation:
|
||
|
opacity_spawn
|
||
|
0.75s endfieldCNAnimDelay() steps(1) forwards,
|
||
|
slide_LR
|
||
|
1.2s endfieldCNAnimDelay() $forceful forwards;
|
||
|
}
|
||
|
}
|
||
|
.g-chr2 {
|
||
|
path {
|
||
|
opacity: 0;
|
||
|
transform: translateX(10px);
|
||
|
animation:
|
||
|
opacity_spawn
|
||
|
0.75s endfieldCNAnimDelay(.08s) steps(1) forwards,
|
||
|
slide_RL
|
||
|
1.2s endfieldCNAnimDelay(.08s) $forceful forwards;
|
||
|
}
|
||
|
}
|
||
|
.g-chr3 {
|
||
|
path {
|
||
|
opacity: 0;
|
||
|
transform: translateX(10px);
|
||
|
animation:
|
||
|
opacity_spawn
|
||
|
0.75s endfieldCNAnimDelay(.2s) steps(1) forwards,
|
||
|
slide_RL
|
||
|
1.2s endfieldCNAnimDelay(.2s) $forceful forwards;
|
||
|
}
|
||
|
#endfield-cn-chr3-1 { animation-delay:endfieldCNAnimDelay(.16s) }
|
||
|
#endfield-cn-chr3-2 { animation-delay:endfieldCNAnimDelay(.26s) }
|
||
|
}
|
||
|
.g-chr4 {
|
||
|
transform: translateX(-0.2px);
|
||
|
clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
|
||
|
animation: expand_DU 0.7s endfieldCNAnimDelay(.6s) forwards;
|
||
|
.arknights, .endfield {
|
||
|
transform: translateY(10px);
|
||
|
animation:
|
||
|
slide_DU
|
||
|
0.7s endfieldCNAnimDelay(.35s) $forceful forwards;
|
||
|
}
|
||
|
.arknights { --order: 1 }
|
||
|
.endfield { --order: 2 }
|
||
|
}
|
||
|
//#endregion
|
||
|
}
|
||
|
}
|