muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

animated flow

Browse source
This commit is contained in:
Fedor Katurov 2019-10-24 17:24:35 +07:00
parent fa0d3c9932
commit 72337142da
1 changed files with 14 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/flow/FlowHero/styles.scss
View file

@ -1,9 +1,19 @@
@keyframes rise {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -10%);
}
}
.wrap { .wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
background: $content_bg; background: $content_bg;
border-radius: $cell_radius; border-radius: $cell_radius;
overflow: hidden;
} }
.hero { .hero {
@ -11,7 +21,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 150%;
display: none; display: none;
transition: opacity 2s; transition: opacity 2s;
background: 50% 50% no-repeat; background: 50% 50% no-repeat;
@ -20,6 +30,7 @@
z-index: 2; z-index: 2;
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
transform: translate(0, -10%);
&::after { &::after {
content: ' '; content: ' ';
@ -46,6 +57,8 @@
&.is_active { &.is_active {
opacity: 1; opacity: 1;
z-index: 3; z-index: 3;
will-change: transform;
animation: rise 5s forwards;
} }
} }