@lovince/motion 0.0.0-stage → 0.1.0

package/styles/utilities.css

@@ -0,0 +1,128 @@
+/*
+ * Opt-in utilities. Every rule sits behind a `motion-*` class, so nothing
+ * here touches an element that did not ask for it. No JavaScript needed.
+ */
+
+.motion-link {
+  position: relative;
+  text-decoration: none;
+}
+
+.motion-link::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: -0.2em;
+  height: 1px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform var(--motion-duration-normal) var(--motion-ease-standard);
+}
+
+.motion-link:hover::after,
+.motion-link:focus-visible::after {
+  transform: scaleX(1);
+  transform-origin: left;
+}
+
+.motion-lift {
+  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.motion-lift:hover,
+.motion-lift:focus-visible {
+  transform: translate3d(0, calc(var(--motion-distance-sm) / -3), 0);
+}
+
+.motion-press {
+  transition: transform var(--motion-duration-instant) var(--motion-ease-standard);
+}
+
+.motion-press:active {
+  transform: scale(0.97);
+}
+
+@keyframes motion-fade-up {
+  from {
+    opacity: 0;
+    transform: translate3d(0, var(--motion-distance-md), 0);
+  }
+}
+
+@keyframes motion-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes motion-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+}
+
+@keyframes motion-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes motion-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* One-shot entrances on load; `--motion-delay` staggers them by hand. */
+.motion-fade-up,
+.motion-fade-in,
+.motion-scale-in {
+  animation-duration: var(--motion-duration-slow);
+  animation-timing-function: var(--motion-ease-emphasized);
+  animation-delay: var(--motion-delay, 0s);
+  animation-fill-mode: both;
+}
+
+.motion-fade-up {
+  animation-name: motion-fade-up;
+}
+
+.motion-fade-in {
+  animation-name: motion-fade-in;
+}
+
+.motion-scale-in {
+  animation-name: motion-scale-in;
+}
+
+.motion-spin {
+  animation: motion-spin calc(var(--motion-duration-scene) * 1.5) linear infinite;
+}
+
+.motion-pulse {
+  animation: motion-pulse calc(var(--motion-duration-scene) * 2) var(--motion-ease-reversible) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .motion-link::after,
+  .motion-lift,
+  .motion-press {
+    transition: none;
+  }
+
+  .motion-lift:hover,
+  .motion-lift:focus-visible,
+  .motion-press:active {
+    transform: none;
+  }
+
+  .motion-fade-up,
+  .motion-fade-in,
+  .motion-scale-in,
+  .motion-spin,
+  .motion-pulse {
+    animation: none;
+  }
+}