tw-animations 2.0.0

package/src/animations/back-exits.css

@@ -0,0 +1,77 @@
+@theme default {
+  --animate-back-out-down: back-out-down var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-back-out-start: back-out-start var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-back-out-end: back-out-end var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-back-out-up: back-out-up var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes back-out-down {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    20% {
+      transform: translateY(0px) scale(0.7);
+      opacity: 0.7;
+    }
+    100% {
+      transform: translateY(700px) scale(0.7);
+      opacity: 0.7;
+    }
+  }
+
+  @keyframes back-out-start {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    20% {
+      transform: translateX(0px) scale(0.7);
+      opacity: 0.7;
+    }
+    100% {
+      transform: translateX(-2000px) scale(0.7);
+      opacity: 0.7;
+    }
+  }
+
+  @keyframes back-out-end {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    20% {
+      transform: translateX(0px) scale(0.7);
+      opacity: 0.7;
+    }
+    100% {
+      transform: translateX(2000px) scale(0.7);
+      opacity: 0.7;
+    }
+  }
+
+  @keyframes back-out-up {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    20% {
+      transform: translateY(0px) scale(0.7);
+      opacity: 0.7;
+    }
+    100% {
+      transform: translateY(-700px) scale(0.7);
+      opacity: 0.7;
+    }
+  }
+}

package/src/animations/bouncing-entrances.css

@@ -0,0 +1,126 @@
+@theme default {
+  --animate-bounce-in: bounce-in var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-bounce-in-down: bounce-in-down var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-bounce-in-start: bounce-in-start
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-bounce-in-end: bounce-in-end var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-bounce-in-up: bounce-in-up var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes bounce-in {
+    0% {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+    20% {
+      transform: scale3d(1.1, 1.1, 1.1);
+    }
+    40% {
+      transform: scale3d(0.9, 0.9, 0.9);
+    }
+    60% {
+      opacity: 1;
+      transform: scale3d(1.03, 1.03, 1.03);
+    }
+    80% {
+      transform: scale3d(0.97, 0.97, 0.97);
+    }
+    to {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes bounce-in-down {
+    0% {
+      opacity: 0;
+      transform: translate3d(0, -3000px, 0) scaleY(3);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, 25px, 0) scaleY(0.9);
+    }
+    75% {
+      transform: translate3d(0, -10px, 0) scaleY(0.95);
+    }
+    90% {
+      transform: translate3d(0, 5px, 0) scaleY(0.985);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes bounce-in-start {
+    0% {
+      opacity: 0;
+      transform: translate3d(-3000px, 0, 0) scaleX(3);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(25px, 0, 0) scaleX(1);
+    }
+    75% {
+      transform: translate3d(-10px, 0, 0) scaleX(0.98);
+    }
+    90% {
+      transform: translate3d(5px, 0, 0) scaleX(0.995);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes bounce-in-end {
+    from {
+      opacity: 0;
+      transform: translate3d(3000px, 0, 0) scaleX(3);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(-25px, 0, 0) scaleX(1);
+    }
+    75% {
+      transform: translate3d(10px, 0, 0) scaleX(0.98);
+    }
+    90% {
+      transform: translate3d(-5px, 0, 0) scaleX(0.995);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes bounce-in-up {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 3000px, 0) scaleY(5);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, -20px, 0) scaleY(0.9);
+    }
+    75% {
+      transform: translate3d(0, 10px, 0) scaleY(0.95);
+    }
+    90% {
+      transform: translate3d(0, -5px, 0) scaleY(0.985);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}

package/src/animations/bouncing-exits.css

@@ -0,0 +1,90 @@
+@theme default {
+  --animate-bounce-out: bounce-out var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-bounce-out-down: bounce-out-down
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-bounce-out-start: bounce-out-start
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-bounce-out-end: bounce-out-end var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-bounce-out-up: bounce-out-up var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes bounce-out {
+    20% {
+      transform: scale3d(0.9, 0.9, 0.9);
+    }
+    50%,
+    55% {
+      opacity: 1;
+      transform: scale3d(1.1, 1.1, 1.1);
+    }
+    to {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+  }
+
+  @keyframes bounce-out-down {
+    20% {
+      transform: translate3d(0, 10px, 0) scaleY(0.985);
+    }
+    40%,
+    45% {
+      opacity: 1;
+      transform: translate3d(0, -20px, 0) scaleY(0.9);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, 2000px, 0) scaleY(3);
+    }
+  }
+
+  @keyframes bounce-out-start {
+    20% {
+      opacity: 1;
+      transform: translate3d(20px, 0, 0) scaleX(0.9);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(-2000px, 0, 0) scaleX(2);
+    }
+  }
+
+  @keyframes bounce-out-end {
+    20% {
+      opacity: 1;
+      transform: translate3d(-20px, 0, 0) scaleX(0.9);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(2000px, 0, 0) scaleX(2);
+    }
+  }
+
+  @keyframes bounce-out-up {
+    20% {
+      transform: translate3d(0, -10px, 0) scaleY(0.985);
+    }
+    40%,
+    45% {
+      opacity: 1;
+      transform: translate3d(0, 20px, 0) scaleY(0.9);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, -2000px, 0) scaleY(3);
+    }
+  }
+}

package/src/animations/dashing.css

@@ -0,0 +1,71 @@
+@theme default {
+  --animate-dash-in-start: dash-in-start var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-dash-in-end: dash-in-end var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-dash-out-start: dash-out-start var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-dash-out-end: dash-out-end var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes dash-in-start {
+    from {
+      transform: translate3d(-100%, 0, 0) skewX(30deg);
+      opacity: 0;
+    }
+    60% {
+      transform: skewX(-20deg);
+      opacity: 1;
+    }
+    80% {
+      transform: skewX(5deg);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dash-in-end {
+    from {
+      transform: translate3d(100%, 0, 0) skewX(-30deg);
+      opacity: 0;
+    }
+    60% {
+      transform: skewX(20deg);
+      opacity: 1;
+    }
+    80% {
+      transform: skewX(-5deg);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dash-out-start {
+    from {
+      opacity: 1;
+    }
+    to {
+      transform: translate3d(-100%, 0, 0) skewX(-30deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes dash-out-end {
+    from {
+      opacity: 1;
+    }
+    to {
+      transform: translate3d(100%, 0, 0) skewX(30deg);
+      opacity: 0;
+    }
+  }
+}

package/src/animations/default.css

@@ -0,0 +1,17 @@
+@theme default {
+  --animate-spin: spin var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, linear)
+    var(--default-animation-delay, 0s) infinite;
+
+  --animate-ping: ping var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, cubic-bezier(0, 0, 0.2, 1))
+    var(--default-animation-delay, 0s) infinite;
+
+  --animate-pulse: pulse var(--default-animation-duration, 2s)
+    var(--default-animation-timing-function, cubic-bezier(0.4, 0, 0.6, 1))
+    var(--default-animation-delay, 0s) infinite;
+
+  --animate-bounce: bounce var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) infinite;
+}

package/src/animations/expanding.css

@@ -0,0 +1,145 @@
+@theme default {
+  --animate-expand-horizontally: expand-horizontally
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes expand-horizontally {
+    from {
+      transform: scaleX(0);
+    }
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  --animate-expand-vertically: expand-vertically
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes expand-vertically {
+    from {
+      transform: scaleY(0);
+    }
+    to {
+      transform: scaleY(1);
+    }
+  }
+
+  --animate-contract-horizontally: contract-horizontally
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes contract-horizontally {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(0);
+    }
+  }
+
+  --animate-contract-vertically: contract-vertically
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes contract-vertically {
+    from {
+      transform: scaleY(1);
+    }
+    to {
+      transform: scaleY(0);
+    }
+  }
+
+  --animate-bounce-fade-in: bounce-fade-in var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes bounce-fade-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.3);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.05);
+    }
+    70% {
+      transform: scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  --animate-pulse-fade-in: pulse-fade-in var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes pulse-fade-in {
+    0% {
+      opacity: 0;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.5;
+      transform: scale(1.1);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  --animate-slide-up-fade: slide-up-fade var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes slide-up-fade {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+@utility animate-expand-horizontally {
+  animation: var(--animate-expand-horizontally);
+  transform-origin: left;
+}
+
+@utility animate-expand-vertically {
+  animation: var(--animate-expand-vertically);
+  transform-origin: top;
+}
+
+@utility animate-contract-horizontally {
+  animation: var(--animate-contract-horizontally);
+  transform-origin: left;
+}
+
+@utility animate-contract-vertically {
+  animation: var(--animate-contract-vertically);
+  transform-origin: top;
+}
+
+@utility animate-bounce-fade-in {
+  animation: var(--animate-bounce-fade-in);
+}
+
+@utility animate-pulse-fade-in {
+  animation: var(--animate-pulse-fade-in);
+}
+
+@utility animate-slide-up-fade {
+  animation: var(--animate-slide-up-fade);
+}

package/src/animations/fading-entrances.css

@@ -0,0 +1,74 @@
+@theme default {
+  --animate-fade-in: fade-in var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-fade-in-down: fade-in-down var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-fade-in-start: fade-in-start var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-fade-in-end: fade-in-end var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-fade-in-up: fade-in-up var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-in-down {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in-start {
+    from {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fade-in-end {
+    from {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

package/src/animations/fading-exits.css

@@ -0,0 +1,75 @@
+@theme default {
+  --animate-fade-out: fade-out var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-fade-out-down: fade-out-down var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-fade-out-start: fade-out-start
+    var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-fade-out-end: fade-out-end var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-fade-out-up: fade-out-up var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes fade-out-down {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+  }
+
+  @keyframes fade-out-start {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+  }
+
+  @keyframes fade-out-end {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+  }
+
+  @keyframes fade-out-up {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+  }
+}