tw-animations 2.0.0

package/src/animations/zooming-exits.css

@@ -0,0 +1,78 @@
+@theme default {
+  --animate-zoom-out: zoom-out var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-zoom-out-down: zoom-out-down var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-zoom-out-up: zoom-out-up var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-zoom-out-start: zoom-out-start var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-zoom-out-end: zoom-out-end var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes zoom-out {
+    from {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes zoom-out-down {
+    40% {
+      opacity: 1;
+      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    }
+    to {
+      opacity: 0;
+      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    }
+  }
+
+  @keyframes zoom-out-up {
+    40% {
+      opacity: 1;
+      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    }
+    to {
+      opacity: 0;
+      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    }
+  }
+
+  @keyframes zoom-out-start {
+    40% {
+      opacity: 1;
+      transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.1) translate3d(-2000px, 0, 0);
+    }
+  }
+
+  @keyframes zoom-out-end {
+    40% {
+      opacity: 1;
+      transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.1) translate3d(2000px, 0, 0);
+    }
+  }
+}

package/src/index.css

@@ -0,0 +1,33 @@
+/* Animations */
+@import "./animations/attention-seekers.css";
+@import "./animations/back-entrances.css";
+@import "./animations/back-exits.css";
+@import "./animations/bouncing-entrances.css";
+@import "./animations/bouncing-exits.css";
+@import "./animations/dashing.css";
+@import "./animations/default.css";
+@import "./animations/expanding.css";
+@import "./animations/fading-entrances.css";
+@import "./animations/fading-exits.css";
+@import "./animations/flippers.css";
+@import "./animations/rotating-entrances.css";
+@import "./animations/rotating-exits.css";
+@import "./animations/sliding-entrances.css";
+@import "./animations/sliding-exits.css";
+@import "./animations/specials.css";
+@import "./animations/zooming-entrances.css";
+@import "./animations/zooming-exits.css";
+
+/* Scroll Animations (NEW in v2.0) */
+@import "./scroll/timelines.css";
+@import "./scroll/ranges.css";
+
+/* Animation Control Utilities */
+@import "./utilities/composition.css";
+@import "./utilities/delay.css";
+@import "./utilities/direction.css";
+@import "./utilities/duration.css";
+@import "./utilities/fill-mode.css";
+@import "./utilities/iteration-count.css";
+@import "./utilities/play-state.css";
+@import "./utilities/timing-function.css";

package/src/scroll/ranges.css

@@ -0,0 +1,82 @@
+/* Animation Range - Basic Keywords */
+@utility animate-range-normal {
+  animation-range: normal;
+}
+
+@utility animate-range-cover {
+  animation-range: cover;
+}
+
+@utility animate-range-contain {
+  animation-range: contain;
+}
+
+@utility animate-range-entry {
+  animation-range: entry;
+}
+
+@utility animate-range-exit {
+  animation-range: exit;
+}
+
+@utility animate-range-entry-crossing {
+  animation-range: entry-crossing;
+}
+
+@utility animate-range-exit-crossing {
+  animation-range: exit-crossing;
+}
+
+/* Preset Animation Ranges */
+@utility animate-range-gradual {
+  animation-range: 10% 90%;
+}
+
+@utility animate-range-moderate {
+  animation-range: 20% 80%;
+}
+
+@utility animate-range-brisk {
+  animation-range: 30% 70%;
+}
+
+@utility animate-range-rapid {
+  animation-range: 40% 60%;
+}
+
+/* Specific Entry Ranges */
+@utility animate-range-entry-start {
+  animation-range: entry 0%;
+}
+
+@utility animate-range-entry-end {
+  animation-range: entry 100%;
+}
+
+/* Specific Exit Ranges */
+@utility animate-range-exit-start {
+  animation-range: exit 0%;
+}
+
+@utility animate-range-exit-end {
+  animation-range: exit 100%;
+}
+
+/* Arbitrary values for custom animation ranges */
+/* Examples:
+   animate-range-[entry_0%_cover_50%]
+   animate-range-[entry_10%_contain_25%]
+   animate-range-[cover_25%_cover_75%]
+*/
+@utility animate-range-* {
+  animation-range: --value([*]);
+}
+
+/* Animation Range Start/End - Separate controls */
+@utility animate-range-start-* {
+  animation-range-start: --value([*]);
+}
+
+@utility animate-range-end-* {
+  animation-range-end: --value([*]);
+}

package/src/scroll/timelines.css

@@ -0,0 +1,46 @@
+/* View Timelines */
+@utility timeline-view {
+  animation-timeline: view();
+}
+
+@utility timeline-view-x {
+  animation-timeline: view(x);
+}
+
+@utility timeline-view-y {
+  animation-timeline: view(y);
+}
+
+@utility timeline-view-block {
+  animation-timeline: view(block);
+}
+
+@utility timeline-view-inline {
+  animation-timeline: view(inline);
+}
+
+/* Scroll Timelines */
+@utility timeline-scroll {
+  animation-timeline: scroll();
+}
+
+@utility timeline-scroll-x {
+  animation-timeline: scroll(x);
+}
+
+@utility timeline-scroll-y {
+  animation-timeline: scroll(y);
+}
+
+@utility timeline-scroll-block {
+  animation-timeline: scroll(block);
+}
+
+@utility timeline-scroll-inline {
+  animation-timeline: scroll(inline);
+}
+
+/* Arbitrary values for complex timeline definitions */
+@utility timeline-* {
+  animation-timeline: --value([*]);
+}

package/src/utilities/composition.css

@@ -0,0 +1,11 @@
+@utility animate-replace {
+  animation-composition: replace;
+}
+
+@utility animate-add {
+  animation-composition: add;
+}
+
+@utility animate-accumulate {
+  animation-composition: accumulate;
+}

package/src/utilities/delay.css

@@ -0,0 +1,9 @@
+@utility animate-delay-none {
+  animation-delay: 0s;
+}
+
+@utility animate-delay-* {
+  /* prettier-ignore */
+  animation-delay: --value(integer)ms;
+  animation-delay: --value([ *]);
+}

package/src/utilities/direction.css

@@ -0,0 +1,15 @@
+@utility animate-normal {
+  animation-direction: normal;
+}
+
+@utility animate-reverse {
+  animation-direction: reverse;
+}
+
+@utility animate-alternate {
+  animation-direction: alternate;
+}
+
+@utility animate-alternate-reverse {
+  animation-direction: alternate-reverse;
+}

package/src/utilities/duration.css

@@ -0,0 +1,9 @@
+@utility animate-duration-none {
+  animation-duration: 0s;
+}
+
+@utility animate-duration-* {
+  /* prettier-ignore */
+  animation-duration: --value(integer)ms;
+  animation-duration: --value([ *]);
+}

package/src/utilities/fill-mode.css

@@ -0,0 +1,15 @@
+@utility animate-fill-none {
+  animation-fill-mode: normal;
+}
+
+@utility animate-fill-forwards {
+  animation-fill-mode: forwards;
+}
+
+@utility animate-fill-backwards {
+  animation-fill-mode: backwards;
+}
+
+@utility animate-fill-both {
+  animation-fill-mode: both;
+}

package/src/utilities/iteration-count.css

@@ -0,0 +1,19 @@
+@utility animate-infinite {
+  animation-iteration-count: infinite;
+}
+
+@utility animate-once {
+  animation-iteration-count: 1;
+}
+
+@utility animate-twice {
+  animation-iteration-count: 2;
+}
+
+@utility animate-thrice {
+  animation-iteration-count: 3;
+}
+
+@utility animate-iteration-* {
+  animation-iteration-count: --value(integer, [integer]);
+}

package/src/utilities/play-state.css

@@ -0,0 +1,15 @@
+@utility animate-run {
+  animation-play-state: running;
+}
+
+@utility animate-play {
+  animation-play-state: running;
+}
+
+@utility animate-stop {
+  animation-play-state: paused;
+}
+
+@utility animate-pause {
+  animation-play-state: paused;
+}

package/src/utilities/timing-function.css

@@ -0,0 +1,23 @@
+@utility animate-ease {
+  animation-timing-function: ease;
+}
+
+@utility animate-ease-linear {
+  animation-timing-function: linear;
+}
+
+@utility animate-ease-in {
+  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+@utility animate-ease-out {
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+@utility animate-ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@utility animate-ease-* {
+  animation-timing-function: --value([ *]);
+}