✨ feat(animations.scss): Add new pulse and ping animations

Spiderpig86 · Dec 23, 2021 · 5f13215 · 5f13215
1 parent 72839d2
commit 5f13215
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -305,6 +305,17 @@ fieldset legend {
     opacity: 1;
   }
 }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
 /* Hover animation */
 .hover-grow {
   /* Mouse leave */
@@ -387,6 +398,12 @@ fieldset legend {
 .animated.paused {
   animation-play-state: paused !important;
 }
+.animated.pulse {
+  animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.animated.ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
 /* Spacing */
 /* Breakpoints */
 /* Fonts */

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/ext/animations.scss b/src/ext/animations.scss
@@ -4,7 +4,6 @@
 /* Keyframes */
 
 /* Spinning loading animation */
-
 @keyframes loading {
     from {
         transform: rotate(0deg);
@@ -86,6 +85,20 @@
     }
 }
 
+@keyframes pulse {
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes ping {
+    75%,
+    100% {
+        transform: scale(2);
+        opacity: 0;
+    }
+}
+
 /* Hover animation */
 .hover-grow {
     /* Mouse leave */
@@ -183,4 +196,13 @@
     &.paused {
         animation-play-state: paused !important;
     }
+
+    // Useful for loaders
+    &.pulse {
+        animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    &.ping {
+        animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    }
 }