1.0.0

royteusink · Mar 6, 2023 · 0f66d61 · 0f66d61
1 parent 0ef6e7d
commit 0f66d61
Show file tree

Hide file tree

Showing 10 changed files with 1,046 additions and 1,776 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
-demo/
-node_modules/
 .DS_Store
+demo/tailwind.css
+.ignore/
+node_modules/
diff --git a/README.md b/README.md
@@ -19,6 +19,19 @@ yarn add tailwindcss-animation
 
 ## Configuration
 
+tailwind.config.js
+```js
+{
+    plugins: [
+        require('tailwindcss-animation'),
+    ],
+}
+```
+
+## Extended configuration
+
+Extending the properties is possible but not required due support for arbitrary values.
+
 tailwind.config.js
 ```js
 {
@@ -31,105 +44,125 @@ tailwind.config.js
                 2000: '2000ms',
             },
             animationIteration: {
-                '10x': '10',
+                10: '10',
             },
             animationTiming: {
                 cubic: 'cubic-bezier(0, 0, 0.2, 1)',
             },
         },
     },
-    variants: {
-        animationDelay: ['responsive'],
-        animationDuration: ['responsive'],
-        animationIteration: ['responsive'],
-        animationTiming: ['responsive'],
-        animationDirection: ['responsive'],
-        animationFillMode: ['responsive'],
-        animationPlayState: ['responsive'],
-    },
-    plugins: [
-        require('tailwindcss-animation'),
-    ],
 }
 ```
 
 ## Usage
 
 ```html
-<div class="animate-spin animation-duration-400 lg:animation-direction-reverse"></div>
+<div class="w-10 h-10 bg-blue-500 animate-spin timing-ease-in-out-quint animation-delay-100 animation-duration-200 fillmode-forwards playstate-running direction-alternate lg:animation-duration-[1200ms]"></div>
 ```
 
 ## Animation delay
 
-| Class                | Properties               |
-| -------------------- | ------------------------ |
-| animation-delay-none | animation-delay: 0ms;    |
-| animation-delay-100  | animation-delay: 100ms;  |
-| animation-delay-200  | animation-delay: 200ms;  |
-| animation-delay-300  | animation-delay: 300ms;  |
-| animation-delay-400  | animation-delay: 400ms;  |
-| animation-delay-500  | animation-delay: 500ms;  |
-| animation-delay-600  | animation-delay: 600ms;  |
-| animation-delay-700  | animation-delay: 700ms;  |
-| animation-delay-800  | animation-delay: 800ms;  |
-| animation-delay-900  | animation-delay: 900ms;  |
-| animation-delay-1000 | animation-delay: 1000ms; |
+Long variant: animation-delay-% \
+Short variant: n/a
+
+| Class                    | Properties               |
+| ------------------------ | ------------------------ |
+| animation-delay-none     | animation-delay: 0ms;    |
+| animation-delay-100      | animation-delay: 100ms;  |
+| animation-delay-200      | animation-delay: 200ms;  |
+| animation-delay-300      | animation-delay: 300ms;  |
+| animation-delay-400      | animation-delay: 400ms;  |
+| animation-delay-500      | animation-delay: 500ms;  |
+| animation-delay-600      | animation-delay: 600ms;  |
+| animation-delay-700      | animation-delay: 700ms;  |
+| animation-delay-800      | animation-delay: 800ms;  |
+| animation-delay-900      | animation-delay: 900ms;  |
+| animation-delay-1000     | animation-delay: 1000ms; |
+| animation-delay-[1500ms] | animation-delay: 1500ms; |
+| animation-delay-[2s]     | animation-delay: 2s;     |
 
 ## Animation duration
 
-| Class                   | Properties                  |
-| ----------------------- | --------------------------- |
-| animation-duration-none | animation-duration: 0ms;    |
-| animation-duration-100  | animation-duration: 100ms;  |
-| animation-duration-200  | animation-duration: 200ms;  |
-| animation-duration-300  | animation-duration: 300ms;  |
-| animation-duration-400  | animation-duration: 400ms;  |
-| animation-duration-500  | animation-duration: 500ms;  |
-| animation-duration-600  | animation-duration: 600ms;  |
-| animation-duration-700  | animation-duration: 700ms;  |
-| animation-duration-800  | animation-duration: 800ms;  |
-| animation-duration-900  | animation-duration: 900ms;  |
-| animation-duration-1000 | animation-duration: 1000ms; |
+Long variant: animation-duration-% \
+Short variant: n/a
+
+| Class                       | Properties                  |
+| --------------------------- | --------------------------- |
+| animation-duration-none     | animation-duration: 0ms;    |
+| animation-duration-100      | animation-duration: 100ms;  |
+| animation-duration-200      | animation-duration: 200ms;  |
+| animation-duration-300      | animation-duration: 300ms;  |
+| animation-duration-400      | animation-duration: 400ms;  |
+| animation-duration-500      | animation-duration: 500ms;  |
+| animation-duration-600      | animation-duration: 600ms;  |
+| animation-duration-700      | animation-duration: 700ms;  |
+| animation-duration-800      | animation-duration: 800ms;  |
+| animation-duration-900      | animation-duration: 900ms;  |
+| animation-duration-1000     | animation-duration: 1000ms; |
+| animation-duration-[1500ms] | animation-duration: 1500ms; |
+| animation-duration-[2s]     | animation-duration: 2s;     |
 
 ## Animation iteration count
 
-| Class                        | Properties                           |
-| ---------------------------- | ------------------------------------ |
-| animation-iteration-none     | animation-iteration-count: 0;        |
-| animation-iteration-1x       | animation-iteration-count: 1;        |
-| animation-iteration-2x       | animation-iteration-count: 2;        |
-| animation-iteration-infinite | animation-iteration-count: infinite; |
+Long variant: animation-iteration-% \
+Short variant: iterate-%
+
+| Class            | Properties                           |
+| ---------------- | ------------------------------------ |
+| iterate-none     | animation-iteration-count: 0;        |
+| iterate-1        | animation-iteration-count: 1;        |
+| iterate-2        | animation-iteration-count: 2;        |
+| iterate-[10]     | animation-iteration-count: 10;       |
+| iterate-infinite | animation-iteration-count: infinite; |
 
 ## Animation timing function
 
-| Class                        | Properties                              |
-| ---------------------------- | --------------------------------------- |
-| animation-timing-ease        | animation-timing-function: ease;        |
-| animation-timing-ease-in     | animation-timing-function: ease-in;     |
-| animation-timing-ease-out    | animation-timing-function: ease-out;    |
-| animation-timing-ease-in-out | animation-timing-function: ease-in-out; |
+Long variant: animation-timing-% \
+Short variant: timing-%
+
+| Class                                | Properties                                                  |
+| ------------------------------------ | ----------------------------------------------------------- |
+| timing-linear                        | animation-timing-function: linear;                          |
+| timing-ease                          | animation-timing-function: ease;                            |
+| timing-ease-in                       | animation-timing-function: ease-in;                         |
+| timing-ease-out                      | animation-timing-function: ease-out;                        |
+| timing-ease-in-out                   | animation-timing-function: ease-in-out;                     |
+| timing-step-start                    | animation-timing-function: step-start;                      |
+| timing-step-end                      | animation-timing-function: step-end;                        |
+| timing-ease-in-out-back              | animation-timing-function: cubic-bezier(.68,-.55,.265,1.55) |
+| timing-[cubic-bezier(0.1,0.7,1,0.1)] | animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);  |
 
 ## Animation direction
 
-| Class                                 | Properties                              |
-| ------------------------------------- | --------------------------------------- |
-| animation-direction-normal            | animation-direction: normal;            |
-| animation-direction-reverse           | animation-direction: reverse;           |
-| animation-direction-alternate         | animation-direction: alternate;         |
-| animation-direction-alternate-reverse | animation-direction: alternate-reverse; |
+Long variant: animation-direction-% \
+Short variant: direction-%
+
+| Class                       | Properties                              |
+| --------------------------- | --------------------------------------- |
+| direction-normal            | animation-direction: normal;            |
+| direction-reverse           | animation-direction: reverse;           |
+| direction-alternate         | animation-direction: alternate;         |
+| direction-alternate-reverse | animation-direction: alternate-reverse; |
 
 ## Animation fill mode
 
-| Class                    | Properties                      |
-| ------------------------ | ------------------------------- |
-| animation-fill-none      | animation-fill-mode: none;      |
-| animation-fill-forwards  | animation-fill-mode: forwards;  |
-| animation-fill-backwards | animation-fill-mode: backwards; |
-| animation-fill-both      | animation-fill-mode: both;      |
+Long variant: animation-fill-% \
+Short variant: fillmode-%
+
+| Class                     | Properties                           |
+| ------------------------- | ------------------------------------ |
+| fillmode-none             | animation-fill-mode: none;           |
+| fillmode-forwards         | animation-fill-mode: forwards;       |
+| fillmode-backwards        | animation-fill-mode: backwards;      |
+| fillmode-both             | animation-fill-mode: both;           |
+| fillmode-[none,backwards] | animation-fill-mode: none, backwards |
 
 ## Animation play state
 
-| Class                    | Properties                     |
-| ------------------------ | ------------------------------ |
-| animation-state-paused   | animation-play-state: paused;  |
-| animation-state-running  | animation-play-state: running; |
+Long variant: animation-state-% \
+Short variant: playstate-%
+
+| Class              | Properties                     |
+| ------------------ | ------------------------------ |
+| playstate-paused   | animation-play-state: paused;  |
+| playstate-running  | animation-play-state: running; |
diff --git a/demo/.editorconfig b/demo/.editorconfig
@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.js]
+indent_size = 2
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link href="./tailwind.css" rel="stylesheet" />
+        <title>TailwindCSS animation demo</title>
+    </head>
+    <body class="p-10">
+        <div class="mx-auto max-w-4xl flex flex-wrap gap-4">
+            <div class="w-10 h-10 bg-red-500 animate-spin"></div>
+            <div class="w-10 h-10 bg-yellow-500 animate-spin animation-duration-200 sm:bg-yellow-600 lg:bg-yellow-600 sm:animation-duration-400 lg:animation-duration-none"></div>
+            <div class="w-10 h-10 bg-green-500 animate-spin animation-duration-400"></div>
+            <div class="w-10 h-10 bg-blue-500 animate-spin timing-ease-in">2</div>
+            <div class="w-10 h-10 bg-blue-500 animate-spin timing-cubic">3</div>
+            <div class="w-10 h-10 bg-indigo-500 animate-spin iterate-none"></div>
+            <div class="w-10 h-10 bg-indigo-500 animate-spin iterate-1"></div>
+            <div class="w-10 h-10 bg-indigo-500 animate-spin iterate-none"></div>
+            <div class="w-10 h-10 bg-indigo-500 animate-spin iterate-1"></div>
+            <div class="w-10 h-10 bg-purple-500 animate-spin direction-reverse"></div>
+            <div class="w-10 h-10 bg-pink-500 animate-spin animation-delay-1000"></div>
+            <div class="w-10 h-10 bg-black animate-spin playstate-paused lg:playstate-running"></div>
+            <div class="w-10 h-10 bg-black animate-reveal-up fillmode-forwards"></div>
+            <div class="w-10 h-10 bg-black animate-reveal-up fillmode-backwards"></div>
+            <div class="w-10 h-10 bg-black animate-reveal-up fillmode-both"></div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin animation-delay-[1200ms]">D</div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin animation-duration-[1200ms]">D</div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin iterate-[3]">D</div>
+            <div class="w-10 h-10 bg-pink-100 animate-reveal-up timing-[cubic-bezier(0.1,0.7,1,0.1)]">D2</div>
+            <div class="w-10 h-10 bg-pink-100 animate-reveal-up iterate-infinite timing-step-start">D2</div>
+            <div class="w-10 h-10 bg-pink-100 animate-reveal-up iterate-infinite timing-step-end">D2</div>
+            <div class="w-10 h-10 bg-pink-100 animate-reveal-up iterate-infinite timing-[steps(2,jump-start)]">D2</div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin fillmode-[none,backwards]">D</div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin fillmode-delay-200 fillmode-[none,backwards]">D</div>
+            <div class="w-10 h-10 bg-blue-500 animate-spin timing-ease">1</div>
+            <div class="w-10 h-10 bg-blue-500 animate-spin timing-ease-in">1</div>
+            <div class="w-10 h-10 bg-amber-500 animate-spin timing-ease-in-out-quint animation-delay-100 animation-duration-200 fillmode-forwards playstate-running direction-alternate lg:animation-duration-[1200ms]">1</div>
+            <div class="w-10 h-10 bg-green-500 animate-spin timing-ease-in-out-back">1</div>
+
+            <h3 class="w-full text-xl mt-10 mb-2">Compatibility (long classname syntax)</h3>
+            <div class="w-10 h-10 bg-red-500 animate-spin"></div>
+            <div class="w-10 h-10 bg-yellow-500 animate-spin animation-duration-200 sm:bg-yellow-600 lg:bg-yellow-600 sm:animation-duration-400 lg:animation-duration-none"></div>
+            <div class="w-10 h-10 bg-green-500 animate-spin animation-duration-400"></div>
+            <div class="w-10 h-10 bg-blue-500 animate-spin animation-timing-ease-in">2</div>
+            <div class="w-10 h-10 bg-blue-500 animate-spin animation-timing-cubic">3</div>
+            <div class="w-10 h-10 bg-indigo-500 animate-spin animation-iteration-none"></div>
+            <div class="w-10 h-10 bg-indigo-500 animate-spin animation-iteration-1"></div>
+            <div class="w-10 h-10 bg-indigo-500 animate-spin animation-iteration-none"></div>
+            <div class="w-10 h-10 bg-indigo-500 animate-spin animation-iteration-1"></div>
+            <div class="w-10 h-10 bg-purple-500 animate-spin animation-direction-reverse"></div>
+            <div class="w-10 h-10 bg-pink-500 animate-spin animation-delay-1000"></div>
+            <div class="w-10 h-10 bg-black animate-spin animation-state-paused lg:animation-state-running"></div>
+            <div class="w-10 h-10 bg-black animate-reveal-up animation-fill-forwards"></div>
+            <div class="w-10 h-10 bg-black animate-reveal-up animation-fill-backwards"></div>
+            <div class="w-10 h-10 bg-black animate-reveal-up animation-fill-both"></div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin animation-delay-[1200ms]">D</div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin animation-duration-[1200ms]">D</div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin animation-iteration-[3]">D</div>
+            <div class="w-10 h-10 bg-pink-100 animate-reveal-up animation-timing-[cubic-bezier(0.1,0.7,1,0.1)]">D2</div>
+            <div class="w-10 h-10 bg-pink-100 animate-reveal-up animation-iteration-infinite animation-timing-step-start">D2</div>
+            <div class="w-10 h-10 bg-pink-100 animate-reveal-up animation-iteration-infinite animation-timing-step-end">D2</div>
+            <div class="w-10 h-10 bg-pink-100 animate-reveal-up animation-iteration-infinite animation-timing-[steps(2,jump-start)]">D2</div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin animation-fill-[none,backwards]">D</div>
+            <div class="w-10 h-10 bg-pink-100 animate-spin animation-fill-delay-200 animation-fill-[none,backwards]">D</div>
+            <div class="w-10 h-10 bg-blue-500 animate-spin animation-timing-ease">1</div>
+            <div class="w-10 h-10 bg-blue-500 animate-spin animation-timing-ease-in">1</div>
+            <div class="w-10 h-10 bg-amber-500 animate-spin animation-timing-ease-in-out-quint animation-delay-100 animation-duration-200 animation-fill-forwards animation-state-running animation-direction-alternate lg:animation-duration-[1200ms]">1</div>
+            <div class="w-10 h-10 bg-green-500 animate-spin animation-timing-ease-in-out-back">1</div>
+        </div>
+    </body>
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "watch": "npx tailwindcss -o tailwind.css --watch",
+    "dev": "npx tailwindcss -o ./tailwind.css"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "tailwindcss": "^3.2.7",
+    "tailwindcss-animation": "link:../"
+  },
+  "dependencies": {
+    "postcss": "^8.4.21"
+  }
+}
diff --git a/demo/tailwind.config.js b/demo/tailwind.config.js
@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './*.html',
+  ],
+  theme: {
+    extend: {
+      animationTiming: {
+        cubic: 'cubic-bezier(0, 0, 0.2, 1)',
+      },
+      animation: {
+        'reveal-up': 'reveal-up 500ms cubic-bezier(.13, .84, .82, 1)',
+      },
+      keyframes: {
+        'reveal-up': {
+          '0%, 50%': { opacity: '0', transform: 'translateY(0.8rem)', background: 'blue' },
+          '100%': { opacity: '1', transform: 'translateY(0)', background: 'red' },
+        },
+      }
+    },
+  },
+  plugins: [
+    require('tailwindcss-animation'),
+  ],
+}