endpild-laman/components/logo/CN/CN-small.module.scss

95 lines
3.0 KiB
SCSS
Raw Normal View History

2024-01-22 20:52:38 +09:00
@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
}
}