Сделать анимацию логотипа плавнее

This commit is contained in:
2026-09-19 15:38:38 +08:00
parent f8c309bd05
commit b530af9863
+20 -3
View File
@@ -4067,7 +4067,7 @@ body.menu-open{overflow:hidden}
to{opacity:1} to{opacity:1}
} }
@media(prefers-reduced-motion:reduce){ @media(prefers-reduced-motion:reduce){
.baikal-header .hero-copy,.baikal-brand{animation:none} .baikal-header .hero-copy,.baikal-brand,.baikal-brand .brand-window,.baikal-brand span{animation:none}
.reveal{opacity:1;transform:none;transition:none} .reveal{opacity:1;transform:none;transition:none}
.arch-card,.restaurant-card,.museum-card{transition:none} .arch-card,.restaurant-card,.museum-card{transition:none}
} }
@@ -4083,7 +4083,16 @@ body.menu-open{overflow:hidden}
top:50%!important; top:50%!important;
max-width:calc(100% - 96px)!important; max-width:calc(100% - 96px)!important;
transform:translate(-50%,-50%)!important; transform:translate(-50%,-50%)!important;
animation:brandCenteredIn .55s ease-out .08s both!important; will-change:opacity,transform;
animation:brandCenteredIn .85s cubic-bezier(.16,1,.3,1) .08s both!important;
}
.baikal-brand .brand-window{
will-change:opacity,transform;
animation:logoMarkIn .9s cubic-bezier(.16,1,.3,1) .16s both;
}
.baikal-brand span{
will-change:opacity,transform;
animation:logoTextIn .7s cubic-bezier(.16,1,.3,1) .24s both;
} }
.menu-toggle{ .menu-toggle{
position:absolute!important; position:absolute!important;
@@ -4093,9 +4102,17 @@ body.menu-open{overflow:hidden}
transform:translateY(-50%)!important; transform:translateY(-50%)!important;
} }
@keyframes brandCenteredIn{ @keyframes brandCenteredIn{
from{opacity:0;transform:translate(-50%,calc(-50% - 10px))} from{opacity:0;transform:translate(-50%,calc(-50% - 14px)) scale(.96)}
to{opacity:1;transform:translate(-50%,-50%)} to{opacity:1;transform:translate(-50%,-50%)}
} }
@keyframes logoMarkIn{
from{opacity:0;transform:translateX(-8px) rotate(-8deg) scale(.86)}
to{opacity:1;transform:translateX(0) rotate(0) scale(1)}
}
@keyframes logoTextIn{
from{opacity:0;transform:translateX(8px)}
to{opacity:1;transform:translateX(0)}
}
.baikal-nav.is-open a:nth-child(4){transition-delay:.09s!important} .baikal-nav.is-open a:nth-child(4){transition-delay:.09s!important}
.baikal-nav.is-open a:nth-child(5){transition-delay:.12s!important} .baikal-nav.is-open a:nth-child(5){transition-delay:.12s!important}
.baikal-nav.is-open a:nth-child(6){transition-delay:.15s!important} .baikal-nav.is-open a:nth-child(6){transition-delay:.15s!important}