tw-animations 2.0.0

package/src/animations/flippers.css

@@ -0,0 +1,132 @@
+@theme default {
+  --animate-flip: flip var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-flip-in-x: flip-in-x var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-flip-in-y: flip-in-y var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-flip-out-x: flip-out-x var(--default-animation-duration, 0.75s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-flip-out-y: flip-out-y var(--default-animation-duration, 0.75s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes flip {
+    from {
+      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+        rotate3d(0, 1, 0, -360deg);
+    }
+    40% {
+      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+        rotate3d(0, 1, 0, -190deg);
+    }
+    50% {
+      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+        rotate3d(0, 1, 0, -170deg);
+    }
+    80% {
+      transform: perspective(400px) scale3d(0.95, 0.95, 0.95)
+        translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+    }
+    to {
+      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+        rotate3d(0, 1, 0, 0deg);
+    }
+  }
+
+  @keyframes flip-in-x {
+    from {
+      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+      opacity: 0;
+    }
+    40% {
+      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    }
+    60% {
+      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+      opacity: 1;
+    }
+    80% {
+      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    }
+    to {
+      transform: perspective(400px);
+    }
+  }
+
+  @keyframes flip-in-y {
+    from {
+      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+      opacity: 0;
+    }
+    40% {
+      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    }
+    60% {
+      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+      opacity: 1;
+    }
+    80% {
+      transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    }
+    to {
+      transform: perspective(400px);
+    }
+  }
+
+  @keyframes flip-out-x {
+    from {
+      transform: perspective(400px);
+    }
+    30% {
+      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+      opacity: 1;
+    }
+    to {
+      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes flip-out-y {
+    from {
+      transform: perspective(400px);
+    }
+    30% {
+      transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+      opacity: 1;
+    }
+    to {
+      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+      opacity: 0;
+    }
+  }
+}
+
+@utility animate-flip {
+  backface-visibility: visible;
+}
+
+@utility animate-flip-in-x {
+  backface-visibility: visible;
+}
+
+@utility animate-flip-in-y {
+  backface-visibility: visible;
+}
+
+@utility animate-flip-out-x {
+  backface-visibility: visible;
+}
+
+@utility animate-flip-out-y {
+  backface-visibility: visible;
+}

package/src/animations/rotating-entrances.css

@@ -0,0 +1,100 @@
+@theme default {
+  --animate-rotate-in: rotate-in var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-rotate-in-down-start: rotate-in-down-start
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-rotate-in-down-end: rotate-in-down-end
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-rotate-in-up-start: rotate-in-up-start
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-rotate-in-up-end: rotate-in-up-end
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes rotate-in {
+    from {
+      transform: rotate3d(0, 0, 1, -200deg);
+      opacity: 0;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rotate-in-down-start {
+    from {
+      transform: rotate3d(0, 0, 1, -45deg);
+      opacity: 0;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rotate-in-down-end {
+    from {
+      transform: rotate3d(0, 0, 1, 45deg);
+      opacity: 0;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rotate-in-up-start {
+    from {
+      transform: rotate3d(0, 0, 1, 45deg);
+      opacity: 0;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rotate-in-up-end {
+    from {
+      transform: rotate3d(0, 0, 1, -45deg);
+      opacity: 0;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+}
+
+@utility animate-rotate-in {
+  transform-origin: center;
+}
+
+@utility animate-rotate-in-down-start {
+  transform-origin: left bottom;
+}
+
+@utility animate-rotate-in-down-end {
+  transform-origin: right bottom;
+}
+
+@utility animate-rotate-in-up-start {
+  transform-origin: left bottom;
+}
+
+@utility animate-rotate-in-up-end {
+  transform-origin: right bottom;
+}

package/src/animations/rotating-exits.css

@@ -0,0 +1,95 @@
+@theme default {
+  --animate-rotate-out: rotate-out var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-rotate-out-down-start: rotate-out-down-start
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-rotate-out-down-end: rotate-out-down-end
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-rotate-out-up-start: rotate-out-up-start
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-rotate-out-up-end: rotate-out-up-end
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes rotate-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      transform: rotate3d(0, 0, 1, 200deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes rotate-out-down-start {
+    from {
+      opacity: 1;
+    }
+    to {
+      transform: rotate3d(0, 0, 1, 45deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes rotate-out-down-end {
+    from {
+      opacity: 1;
+    }
+    to {
+      transform: rotate3d(0, 0, 1, -45deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes rotate-out-up-start {
+    from {
+      opacity: 1;
+    }
+    to {
+      transform: rotate3d(0, 0, 1, -45deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes rotate-out-up-end {
+    from {
+      opacity: 1;
+    }
+    to {
+      transform: rotate3d(0, 0, 1, 45deg);
+      opacity: 0;
+    }
+  }
+}
+
+@utility animate-rotate-out {
+  transform-origin: center;
+}
+
+@utility animate-rotate-out-down-start {
+  transform-origin: left bottom;
+}
+
+@utility animate-rotate-out-down-end {
+  transform-origin: right bottom;
+}
+
+@utility animate-rotate-out-up-start {
+  transform-origin: left bottom;
+}
+
+@utility animate-rotate-out-up-end {
+  transform-origin: right bottom;
+}

package/src/animations/sliding-entrances.css

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

package/src/animations/sliding-exits.css

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

package/src/animations/specials.css

@@ -0,0 +1,123 @@
+@theme default {
+  --animate-hinge: hinge var(--default-animation-duration, 2s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-jack-in: jack-in var(--default-animation-duration, 2s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-jack-out: jack-out var(--default-animation-duration, 2s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-roll-in: roll-in var(--default-animation-duration, 2s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-roll-out: roll-out var(--default-animation-duration, 2s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-particle: particle var(--default-animation-duration, 3s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) infinite;
+
+  @keyframes hinge {
+    20%,
+    60% {
+      transform: rotate3d(0, 0, 1, 80deg);
+    }
+    40%,
+    80% {
+      transform: rotate3d(0, 0, 1, 60deg);
+      opacity: 1;
+    }
+    to {
+      transform: translate3d(0, 700px, 0);
+      opacity: 0;
+    }
+  }
+
+  @keyframes jack-in {
+    from {
+      opacity: 0;
+      transform: scale(0.1) rotate(30deg);
+    }
+    50% {
+      transform: rotate(-10deg);
+    }
+    70% {
+      transform: rotate(3deg);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes jack-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    30% {
+      transform: rotate(-3deg);
+    }
+    50% {
+      transform: rotate(10deg);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.1) rotate(30deg);
+    }
+  }
+
+  @keyframes roll-in {
+    from {
+      opacity: 0;
+      transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes roll-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    }
+  }
+
+  @keyframes particle {
+    0% {
+      opacity: 0;
+      transform: translateY(20px) scale(0);
+    }
+    50% {
+      opacity: 1;
+      transform: translateY(-50px) scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(-100px) scale(0);
+    }
+  }
+}
+
+@utility animate-hinge {
+  transform-origin: top left;
+}
+
+@utility animate-jack-in {
+  transform-origin: center bottom;
+}
+
+@utility animate-jack-out {
+  transform-origin: center bottom;
+}

package/src/animations/zooming-entrances.css

@@ -0,0 +1,75 @@
+@theme default {
+  --animate-zoom-in: zoom-in var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-zoom-in-down: zoom-in-down var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-zoom-in-up: zoom-in-up var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-zoom-in-start: zoom-in-start var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-zoom-in-end: zoom-in-end var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes zoom-in {
+    from {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes zoom-in-down {
+    from {
+      opacity: 0;
+      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    }
+  }
+
+  @keyframes zoom-in-up {
+    from {
+      opacity: 0;
+      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    }
+  }
+
+  @keyframes zoom-in-start {
+    from {
+      opacity: 0;
+      transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    }
+  }
+
+  @keyframes zoom-in-end {
+    from {
+      opacity: 0;
+      transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    }
+  }
+}