@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 } }