jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-17 19:25:32 -04:00
Code Issues Activity

fix hand wave pet peeves & heart beats per minute (still fatally low)

Browse Source
This commit is contained in:
Jake Jarvis
2020-06-02 12:46:17 -04:00
parent 598367c19e
commit 23eabb48c0
1 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
assets/sass/components/_animation.scss
View File

@@ -1,14 +1,17 @@
@charset "UTF-8"; @charset "UTF-8";
/*! Magic Waving Hand Emoji™: https://jrvs.io/wave */
.wave { .wave {
display: inline-block; display: inline-block;
animation: wave 5s infinite; animation: wave 5s infinite;
transform-origin: 70% 70%; animation-delay: 1s;
transform-origin: 65% 80%;
} }
.beat { .beat {
display: inline-block; display: inline-block;
animation: beat 20s infinite; // 3 bpm, call 911 if you see this please. animation: beat 10s infinite; // 6 bpm, call 911 if you see this please.
animation-delay: 2.5s; // offset from wave animation
} }
@keyframes wave { @keyframes wave {
@@ -16,20 +19,24 @@
transform: rotate(0deg); transform: rotate(0deg);
} }
5% { 5% {
transform: rotate(-10deg); transform: rotate(14deg);
} }
10% { 10% {
transform: rotate(12deg); transform: rotate(-8deg);
} }
15% { 15% {
transform: rotate(-10deg); transform: rotate(14deg);
} }
20% { 20% {
transform: rotate(9deg); transform: rotate(-4deg);
} }
25% { 25% {
transform: rotate(10deg);
}
30% {
transform: rotate(0deg); transform: rotate(0deg);
} }
// pause for 3.5 out of 5 seconds
100% { 100% {
transform: rotate(0deg); transform: rotate(0deg);
} }
@@ -39,19 +46,19 @@
0% { 0% {
transform: scale(1); transform: scale(1);
} }
1% {
transform: scale(1.25);
}
2% { 2% {
transform: scale(1);
}
3% {
transform: scale(1.25); transform: scale(1.25);
} }
4% { 4% {
transform: scale(1); transform: scale(1);
} }
// pause for ~19 out of 20 seconds 6% {
transform: scale(1.2);
}
8% {
transform: scale(1);
}
// pause for ~9 out of 10 seconds
100% { 100% {
transform: scale(1); transform: scale(1);
} }