dan/heaventaker
1
0
Fork 0
mirror of https://github.com/danbulant/heaventaker synced 2026-06-20 23:21:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

attempt at animations

Browse source
This commit is contained in:
Daniel Bulant 2021-08-31 15:49:04 +02:00
parent a58c1dc807
commit c1895d727b
1 changed files with 35 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/pages/menu.svelte
View file

@ -66,9 +66,11 @@
<h2>Paused</h2>
<p>Angels are waiting - don't spend too much time here</p>
{#each buttons as button, i}
<Button active={activeButton === i} on:click={() => select(i)}>
{button.text}
</Button>
<div class="button" style="--movein-delay: {(1.5 * Number(i) + 2.5) / 10}s;">
<Button active={activeButton === i} on:click={() => select(i)}>
{button.text}
</Button>
</div>
{/each}
</div>
</div>
@ -82,8 +84,38 @@
height: 100vh;
background: rgba(0,0,0,0.8);
color: white;
animation: opacity .3s;
}
@keyframes opacity {
from { opacity: 0; }
to { opacity: 1; }
}
.options {
text-align: center;
}
.options h2 {
--movein-delay: .1s;
}
.options p {
--movein-delay: .20s;
}
.button {
width: 100%;
}
@keyframes moveIn {
from {
transform: translateY(75px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.options > * {
animation-fill-mode: both;
/* animation: moveIn .2s; */
animation-timing-function: ease-in;
animation-delay: var(--movein-delay);
}
</style>