mirror of
https://gitlab.com/serenetia/endpild-laman.git
synced 2025-03-15 11:35:53 +08:00
205 lines
7.1 KiB
SCSS
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;
|
||
|
}
|