mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
feat(login): animated hand wave
This commit is contained in:
parent
d439d63a91
commit
ba82ff9f39
1 changed files with 45 additions and 0 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue