cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-26 23:42:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(login): animated hand wave

Browse source
This commit is contained in:
trashtemp 2021-12-25 22:48:00 +01:00
parent d439d63a91
commit ba82ff9f39
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
1 changed files with 45 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/pages/login/Login.module.scss
View file

@ -1,3 +1,43 @@
// Pure CSS hand wave - by https://jarv.is/notes/css-waving-hand-emoji/
@keyframes wave-animation {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(14deg);
} /* The following five values can be played with to make the waving more or less extreme */
20% {
transform: rotate(-8deg);
}
30% {
transform: rotate(14deg);
}
40% {
transform: rotate(-4deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(0deg);
} /* Reset for the last half to pause */
100% {
transform: rotate(0deg);
}
}
/*@keyframes shrink {
0% {
background-size: 140% 140%;
}
10% {
background-size: 150% 150%;
}
100% {
background-size: 100% 100%;
}
}*/
.login { .login {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -8,6 +48,7 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
/*animation: shrink 5s normal forwards;*/
.nav { .nav {
display: flex; display: flex;
@ -113,6 +154,10 @@
gap: 4px; gap: 4px;
img { img {
animation-name: wave-animation;
animation-duration: 2.5s;
animation-iteration-count: 1;
transform-origin: 70% 70%;
height: 28px; height: 28px;
} }
} }