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

205 lines
7.1 KiB
SCSS

@import 'styles/anims';
@import 'EN-big.anim';
.logo {
width: clamp(700px, 100%, 2000px);
height: clamp(400px, 100%, 1000px);
path {
fill: #fff;
}
&[data-noanim] {
#cn-square-1, #cn-square-2, #end-n-blocker { opacity: 0; }
#cn { opacity: 1; }
}
&:not([data-noanim]){
#cn-square-1 {
animation:
logo_cn_1
applyPlaybackSpeed(1s) steps(1),
opacity_fade
applyPlaybackSpeed(0s)
applyPlaybackSpeed(1s) $forceful forwards;
}
#cn-square-2 {
transform: translate(-12px, -12px);
animation:
opacity_spawn
applyPlaybackSpeed(0s)
applyPlaybackSpeed(0.8s) steps(1) forwards,
logo_cn_2
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(0.8s) steps(1) forwards,
opacity_fade
applyPlaybackSpeed(0.2s)
applyPlaybackSpeed(1s) steps(1) forwards;
}
#cn {
animation:
opacity_spawn
applyPlaybackSpeed(0.2s)
applyPlaybackSpeed(1s) steps(1) forwards,
opacity_fade
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(1.6s) steps(1) forwards,
logo_cn_main_scale
applyPlaybackSpeed(0s)
applyPlaybackSpeed(1.5s) steps(1) forwards,
opacity_spawn
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(1.5s) steps(1) forwards;
transform-origin: center;
#cn-path {
animation:
logo_cn_main_stroke
applyPlaybackSpeed(1.1s)
applyPlaybackSpeed(1s) steps(1) forwards,
logo_cn_main_translate
applyPlaybackSpeed(0.97s)
applyPlaybackSpeed(1.5s) $forceful forwards;
}
}
.arknights {
opacity: 0;
transform: translateY(-10px);
$delay: calc(
applyPlaybackSpeed(1.8s) +
applyPlaybackSpeed(0.05s) * var(--order)
);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s) #{$delay} steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.8s) #{$delay} $forceful forwards;
}
.end {
opacity: 0;
animation: opacity_spawn
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(3.3s) $forceful forwards;
}
.field {
opacity: 0;
animation: opacity_spawn
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(4.25s) $forceful forwards;
}
#end-e {
transform: translateX(10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(2.5s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(2.7s) $slow-down forwards;
}
#end-d {
transform: translateX(-8.5px);
animation:
opacity_spawn
applyPlaybackSpeed(0.35s)
applyPlaybackSpeed(3.2s) steps(1) forwards,
end_d_slideLR
applyPlaybackSpeed(1s)
applyPlaybackSpeed(3.4s) $slow-down forwards;
}
#end-n {
animation: opacity_spawn
applyPlaybackSpeed(0s)
applyPlaybackSpeed(3.5s) steps(1) forwards;
}
#end-n-blocker {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
animation:
expand_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(3s) $forceful forwards,
collapse_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(3.5s) $forceful forwards;
}
#field-f {
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(3.35s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(3.35s) $forceful forwards;
}
#field-i {
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(3.45s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(3.45s) $forceful forwards,
field_e_stretch
applyPlaybackSpeed(0.75s)
applyPlaybackSpeed(3.45s) $forceful forwards;
}
#field-e-2 {
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(3.45s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(3.45s) $forceful forwards,
field_e_path
applyPlaybackSpeed(1s)
applyPlaybackSpeed(3.5s) $forceful forwards,
field_e_stretch
applyPlaybackSpeed(0.75s)
applyPlaybackSpeed( 3.45s) $forceful forwards;
}
#field-e {
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(3.5s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(3.5s) $forceful forwards,
field_e_path
applyPlaybackSpeed(1s)
applyPlaybackSpeed(3.5s) $forceful forwards,
field_e_stretch
applyPlaybackSpeed(1s)
applyPlaybackSpeed(3.5s) $forceful forwards;
}
#field-l {
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(3.85s) steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.7s)
applyPlaybackSpeed(3.75s) $slow-down forwards;
}
#field-d {
animation:
opacity_spawn
applyPlaybackSpeed(0s)
applyPlaybackSpeed(4.2s) steps(1) forwards;
}
#field-d-2 {
transform: translateY(10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.14s)
applyPlaybackSpeed(4.1s) steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(4.1s) $slow-down forwards;
}
}
}
#field-d {
fill: transparent;
stroke: #fff;
stroke-width: 0.1;
}