fade in animation on app startup
This commit is contained in:
parent
e2855811d3
commit
3a4394204c
|
@ -5,5 +5,7 @@
|
||||||
|
|
||||||
<Titlebar />
|
<Titlebar />
|
||||||
<div class='backdrop'>
|
<div class='backdrop'>
|
||||||
|
<div class='delay-show'>
|
||||||
<Load />
|
<Load />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
26
src/root.css
26
src/root.css
|
@ -13,3 +13,29 @@ body, html {
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes delay-show-fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
position: relative;
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
position: relative;
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
position: relative;
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.delay-show {
|
||||||
|
position: relative;
|
||||||
|
top: 10%;
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
animation: delay-show-fade-in 1.5s ease;
|
||||||
|
}
|
Loading…
Reference in New Issue