1 files changed, 53 insertions, 0 deletions
diff --git a/examples/snowpack/public/css/_animations.scss b/examples/snowpack/public/css/_animations.scss
new file mode 100644
index 000000000..182f88ec4
--- /dev/null
+++ b/examples/snowpack/public/css/_animations.scss
@@ -0,0 +1,53 @@
+@use './var' as *;
+
+$easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
+$easeInExpo: cubic-bezier(0.7, 0, 0.84, 0);
+$easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1);
+$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
+$easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+$easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
+$easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
+$easeInQuad: cubic-bezier(0.11, 0, 0.5, 0);
+$quintic: cubic-bezier(0.76, 0.05, 0.86, 0.06);
+$transition-fast: 40ms;
+$transition-medium: 500ms;
+$transition-slow: 1s;
+
+@mixin animation-hover-pop {
+  transition: transform $transition-fast $easeInExpo,
+    box-shadow $transition-fast linear;
+  &:hover {
+    box-shadow: 0 2px 2px 0 #2e5e82aa;
+    transform: translateY(-1px);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    color: #2a85ca;
+    border-color: #2a85ca;
+  }
+
+  100% {
+  }
+}
+
+@mixin animation-copy-button {
+  transition: transform $transition-fast $easeInExpo,
+    border-color $transition-fast linear, box-shadow $transition-fast linear;
+
+  svg,
+  span {
+    transition: color $transition-fast linear;
+  }
+
+  &:hover {
+    box-shadow: 0 2px 2px 0 #2e5e8266;
+    transform: translateY(-1px);
+    border-color: #2a85ca;
+    svg,
+    span {
+      color: #2a85ca;
+    }
+  }
+}