tw-animations 2.0.0

package/README.md

@@ -0,0 +1,50 @@
+# tw-animations
+
+Extended animation utilities for **Tailwind CSS v4**.
+
+> **Note:** This package is for Tailwind CSS v4. If you're using Tailwind CSS v3, use [`tw-animations-plugin`](../tailwindcss-animate-plugin) instead.
+
+## Installation
+
+```bash
+npm install tw-animations
+```
+
+## Usage
+
+Add the import to your CSS file:
+
+```css
+@import "tailwindcss";
+@import "tw-animations";
+```
+
+Start using animations:
+
+```html
+<div class="animate-fade-in">Hello World!</div>
+
+<button class="animate-bounce animate-infinite">Click me</button>
+```
+
+## Features
+
+- 85+ animation utilities
+- Scroll animations and view timelines
+- Animation control utilities (duration, delay, timing, etc.)
+- Arbitrary value support
+- CSS Custom Properties for theming
+
+## Documentation
+
+For full documentation, visit [tailwindcss-animate.vercel.app](https://tailwindcss-animate.vercel.app)
+
+## New in v2.0
+
+- **Scroll Animations** - View timelines and animation ranges
+- **12 New Animations** - blurred-fade-in, rotate-360, expand-horizontally, and more
+- **Enhanced Controls** - Better support for arbitrary values
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "tw-animations",
+  "version": "2.0.0",
+  "description": "Extended animation utilities for Tailwind CSS v4",
+  "main": "src/index.css",
+  "style": "src/index.css",
+  "exports": {
+    ".": "./src/index.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "test": "jest --passWithNoTests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alckordev/tw-animations.git",
+    "directory": "packages/tailwindcss-animate"
+  },
+  "keywords": [
+    "tailwindcss",
+    "tailwindcss-v4",
+    "css-animations",
+    "keyframes",
+    "animate",
+    "transitions",
+    "utilities",
+    "scroll-animations",
+    "view-timeline"
+  ],
+  "files": [
+    "/src",
+    "/README.md",
+    "/LICENSE.md"
+  ],
+  "author": "Francisco Luis Rios Vega <alckordev@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alckordev/tw-animations/issues"
+  },
+  "homepage": "https://tailwindcss-animate.vercel.app",
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  }
+}

package/src/animations/attention-seekers.css

@@ -0,0 +1,496 @@
+@theme default {
+  --animate-flash: flash var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-head-shake: head-shake var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-heartbeat: heartbeat var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease-out)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-jelly: jelly var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-rubber-band: rubber-band var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-shake-x: shake-x var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-shake-y: shake-y var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-swing: swing var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-tada: tada var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-wiggle: wiggle var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-wobble: wobble var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  --animate-float: float var(--default-animation-duration, 3s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) infinite;
+
+  @keyframes flash {
+    from,
+    50%,
+    to {
+      opacity: 1;
+    }
+    25%,
+    75% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes head-shake {
+    0% {
+      transform: translateX(0);
+    }
+    6.5% {
+      transform: translateX(-6px) rotateY(-9deg);
+    }
+    18.5% {
+      transform: translateX(5px) rotateY(7deg);
+    }
+    31.5% {
+      transform: translateX(-3px) rotateY(-5deg);
+    }
+    43.5% {
+      transform: translateX(2px) rotateY(3deg);
+    }
+    50% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes heartbeat {
+    0% {
+      transform: scale(1);
+    }
+    25% {
+      transform: scale(1.1);
+    }
+    50% {
+      transform: scale(1);
+    }
+    75% {
+      transform: scale(0.9);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes jelly {
+    from,
+    11.1%,
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+    22.2% {
+      transform: skewX(-12.5deg) skewY(-12.5deg);
+    }
+    33.3% {
+      transform: skewX(6.25deg) skewY(6.25deg);
+    }
+    44.4% {
+      transform: skewX(-3.125deg) skewY(-3.125deg);
+    }
+    55.5% {
+      transform: skewX(1.5625deg) skewY(1.5625deg);
+    }
+    66.6% {
+      transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    }
+    77.7% {
+      transform: skewX(0.390625deg) skewY(0.390625deg);
+    }
+    88.8% {
+      transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    }
+  }
+
+  @keyframes rubber-band {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+    30% {
+      transform: scale3d(1.25, 0.75, 1);
+    }
+    40% {
+      transform: scale3d(0.75, 1.25, 1);
+    }
+    50% {
+      transform: scale3d(1.15, 0.85, 1);
+    }
+    65% {
+      transform: scale3d(0.95, 1.05, 1);
+    }
+    75% {
+      transform: scale3d(1.05, 0.95, 1);
+    }
+    to {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes shake-x {
+    from,
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: translate3d(-10px, 0, 0);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+      transform: translate3d(10px, 0, 0);
+    }
+  }
+
+  @keyframes shake-y {
+    from,
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: translate3d(0, -10px, 0);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+      transform: translate3d(0, 10px, 0);
+    }
+  }
+
+  @keyframes swing {
+    20% {
+      transform: rotate3d(0, 0, 1, 15deg);
+    }
+    40% {
+      transform: rotate3d(0, 0, 1, -10deg);
+    }
+    60% {
+      transform: rotate3d(0, 0, 1, 5deg);
+    }
+    80% {
+      transform: rotate3d(0, 0, 1, -5deg);
+    }
+    to {
+      transform: rotate3d(0, 0, 1, 0deg);
+    }
+  }
+
+  @keyframes tada {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+    10%,
+    20% {
+      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    }
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    }
+    40%,
+    60%,
+    80% {
+      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    }
+    to {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes wiggle {
+    0%,
+    100% {
+      transform: rotate(-3deg);
+    }
+    50% {
+      transform: rotate(3deg);
+    }
+  }
+
+  @keyframes wobble {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    15% {
+      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    }
+    30% {
+      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    }
+    45% {
+      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    }
+    60% {
+      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    }
+    75% {
+      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
+  }
+
+  /* NEW ANIMATIONS - v2.0 */
+  --animate-blurred-fade-in: blurred-fade-in
+    var(--default-animation-duration, 0.9s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes blurred-fade-in {
+    from {
+      opacity: 0;
+      filter: blur(5px);
+    }
+    to {
+      opacity: 1;
+      filter: blur(0);
+    }
+  }
+
+  --animate-blink: blink var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, step-end)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes blink {
+    0%,
+    50% {
+      opacity: 1;
+    }
+    50.01%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  --animate-dancing: dancing var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes dancing {
+    0% {
+      transform: skew(0deg);
+    }
+    25% {
+      transform: skew(-40deg);
+    }
+    50% {
+      transform: skew(40deg);
+    }
+    75% {
+      transform: skew(-40deg);
+    }
+    100% {
+      transform: skew(0deg);
+    }
+  }
+
+  --animate-impulse-rotation-left: impulse-rotation-left
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes impulse-rotation-left {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(40deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+
+  --animate-impulse-rotation-right: impulse-rotation-right
+    var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease-in-out)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes impulse-rotation-right {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(-40deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  --animate-jiggle: jiggle var(--default-animation-duration, 0.6s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes jiggle {
+    0%,
+    100% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(-2deg);
+    }
+    75% {
+      transform: rotate(2deg);
+    }
+  }
+
+  --animate-pop: pop var(--default-animation-duration, 0.5s)
+    var(
+      --default-animation-timing-function,
+      cubic-bezier(0.68, -0.55, 0.265, 1.55)
+    )
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes pop {
+    0% {
+      transform: scale(0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  --animate-rotate-360: rotate-360 var(--default-animation-duration, 1s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes rotate-360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  --animate-rotate-180: rotate-180 var(--default-animation-duration, 0.5s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes rotate-180 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(180deg);
+    }
+  }
+
+  --animate-rotate-90: rotate-90 var(--default-animation-duration, 0.3s)
+    var(--default-animation-timing-function, ease)
+    var(--default-animation-delay, 0s) both;
+
+  @keyframes rotate-90 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+@utility animate-jelly {
+  transform-origin: center;
+}
+
+@utility animate-swing {
+  transform-origin: top center;
+}
+
+@utility animate-heartbeat {
+  animation: var(--animate-heartbeat);
+}
+
+@utility animate-blurred-fade-in {
+  animation: var(--animate-blurred-fade-in);
+}
+
+@utility animate-blink {
+  animation: var(--animate-blink);
+}
+
+@utility animate-dancing {
+  animation: var(--animate-dancing);
+}
+
+@utility animate-impulse-rotation-left {
+  animation: var(--animate-impulse-rotation-left);
+}
+
+@utility animate-impulse-rotation-right {
+  animation: var(--animate-impulse-rotation-right);
+}
+
+@utility animate-jiggle {
+  animation: var(--animate-jiggle);
+}
+
+@utility animate-pop {
+  animation: var(--animate-pop);
+}
+
+@utility animate-rotate-360 {
+  animation: var(--animate-rotate-360);
+}
+
+@utility animate-rotate-180 {
+  animation: var(--animate-rotate-180);
+}
+
+@utility animate-rotate-90 {
+  animation: var(--animate-rotate-90);
+}

package/src/animations/back-entrances.css

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