feat: style
This commit is contained in:
+34
-14
@@ -482,24 +482,44 @@ hr {
|
||||
.about-scroll-anim-enabled.about-scroll-anim-ready .story-copy,
|
||||
.about-scroll-anim-enabled.about-scroll-anim-ready .story-detail {
|
||||
opacity: 1;
|
||||
transition:
|
||||
opacity 520ms ease,
|
||||
transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.about-scroll-anim-enabled.about-scroll-anim-ready .story-copy {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
.about-scroll-anim-enabled.about-scroll-anim-ready .story-detail {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-copy,
|
||||
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-detail {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
animation-duration: 680ms;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1);
|
||||
}
|
||||
|
||||
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-copy {
|
||||
animation-name: about-copy-reveal;
|
||||
}
|
||||
|
||||
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-detail {
|
||||
animation-name: about-detail-reveal;
|
||||
}
|
||||
|
||||
@keyframes about-copy-reveal {
|
||||
from {
|
||||
opacity: 0.12;
|
||||
transform: translate3d(-44px, 26px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes about-detail-reveal {
|
||||
from {
|
||||
opacity: 0.12;
|
||||
transform: translate3d(44px, 26px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.story-copy p:first-child,
|
||||
|
||||
Reference in New Issue
Block a user