css animation experiments because I'm bored. #quarantine

assets/sass/components/_magic.scss

@@ -1,15 +1,16 @@
 @charset "UTF-8";
 
-/*! Magic Waving Hand™ - https://go.jarv.is/wave */
-
-span.wave {
+.wave {
   display: inline-block;
-  animation-name: wave;
-  animation-duration: 2.5s;
-  animation-iteration-count: infinite;
+  animation: wave 2.5s infinite;
   transform-origin: 70% 70%;
 }
 
+.beat {
+  display: inline-block;
+  animation: beat 2s infinite;   // 30 bpm, call 911 if you see this please.
+}
+
 // stylelint-disable indentation
 @keyframes wave {
   0% { transform: rotate(  0.0deg); }
@@ -20,4 +21,13 @@ span.wave {
  50% { transform: rotate(  0.0deg); }
 100% { transform: rotate(  0.0deg); }
 }
+
+@keyframes beat {
+  0% { transform: scale(1.0); }
+ 10% { transform: scale(1.25); }
+ 20% { transform: scale(1.0); }
+ 30% { transform: scale(1.25); }
+ 40% { transform: scale(1.0); }
+100% { transform: scale(1.0); }
+}
 // stylelint-enable indentation

assets/sass/main.scss

@@ -29,4 +29,4 @@ $base-url: "{{ strings.TrimRight "/" .Site.BaseURL }}/";   // consistent trailin
 
 // Miscellaneous
 @import 'components/syntax';
-@import 'components/wave';
+@import 'components/magic';