Skip to content

Commit 0f66d61

Browse files
royteusinkroyteusink
committed
1.0.0
1 parent 0ef6e7d commit 0f66d61

File tree

10 files changed

+1046
-1776
lines changed

10 files changed

+1046
-1776
lines changed

‎.gitignore

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
demo/
2-
node_modules/
31
.DS_Store
2+
demo/tailwind.css
3+
.ignore/
4+
node_modules/

‎README.md

Lines changed: 101 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,19 @@ yarn add tailwindcss-animation
1919

2020
## Configuration
2121

22+
tailwind.config.js
23+
```js
24+
{
25+
plugins: [
26+
require('tailwindcss-animation'),
27+
],
28+
}
29+
```
30+
31+
## Extended configuration
32+
33+
Extending the properties is possible but not required due support for arbitrary values.
34+
2235
tailwind.config.js
2336
```js
2437
{
@@ -31,105 +44,125 @@ tailwind.config.js
3144
2000: '2000ms',
3245
},
3346
animationIteration: {
34-
'10x': '10',
47+
10: '10',
3548
},
3649
animationTiming: {
3750
cubic: 'cubic-bezier(0, 0, 0.2, 1)',
3851
},
3952
},
4053
},
41-
variants: {
42-
animationDelay: ['responsive'],
43-
animationDuration: ['responsive'],
44-
animationIteration: ['responsive'],
45-
animationTiming: ['responsive'],
46-
animationDirection: ['responsive'],
47-
animationFillMode: ['responsive'],
48-
animationPlayState: ['responsive'],
49-
},
50-
plugins: [
51-
require('tailwindcss-animation'),
52-
],
5354
}
5455
```
5556

5657
## Usage
5758

5859
```html
59-
<div class="animate-spin animation-duration-400 lg:animation-direction-reverse"></div>
60+
<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>
6061
```
6162

6263
## Animation delay
6364

64-
| Class | Properties |
65-
| -------------------- | ------------------------ |
66-
| animation-delay-none | animation-delay: 0ms; |
67-
| animation-delay-100 | animation-delay: 100ms; |
68-
| animation-delay-200 | animation-delay: 200ms; |
69-
| animation-delay-300 | animation-delay: 300ms; |
70-
| animation-delay-400 | animation-delay: 400ms; |
71-
| animation-delay-500 | animation-delay: 500ms; |
72-
| animation-delay-600 | animation-delay: 600ms; |
73-
| animation-delay-700 | animation-delay: 700ms; |
74-
| animation-delay-800 | animation-delay: 800ms; |
75-
| animation-delay-900 | animation-delay: 900ms; |
76-
| animation-delay-1000 | animation-delay: 1000ms; |
65+
Long variant: animation-delay-% \
66+
Short variant: n/a
67+
68+
| Class | Properties |
69+
| ------------------------ | ------------------------ |
70+
| animation-delay-none | animation-delay: 0ms; |
71+
| animation-delay-100 | animation-delay: 100ms; |
72+
| animation-delay-200 | animation-delay: 200ms; |
73+
| animation-delay-300 | animation-delay: 300ms; |
74+
| animation-delay-400 | animation-delay: 400ms; |
75+
| animation-delay-500 | animation-delay: 500ms; |
76+
| animation-delay-600 | animation-delay: 600ms; |
77+
| animation-delay-700 | animation-delay: 700ms; |
78+
| animation-delay-800 | animation-delay: 800ms; |
79+
| animation-delay-900 | animation-delay: 900ms; |
80+
| animation-delay-1000 | animation-delay: 1000ms; |
81+
| animation-delay-[1500ms] | animation-delay: 1500ms; |
82+
| animation-delay-[2s] | animation-delay: 2s; |
7783

7884
## Animation duration
7985

80-
| Class | Properties |
81-
| ----------------------- | --------------------------- |
82-
| animation-duration-none | animation-duration: 0ms; |
83-
| animation-duration-100 | animation-duration: 100ms; |
84-
| animation-duration-200 | animation-duration: 200ms; |
85-
| animation-duration-300 | animation-duration: 300ms; |
86-
| animation-duration-400 | animation-duration: 400ms; |
87-
| animation-duration-500 | animation-duration: 500ms; |
88-
| animation-duration-600 | animation-duration: 600ms; |
89-
| animation-duration-700 | animation-duration: 700ms; |
90-
| animation-duration-800 | animation-duration: 800ms; |
91-
| animation-duration-900 | animation-duration: 900ms; |
92-
| animation-duration-1000 | animation-duration: 1000ms; |
86+
Long variant: animation-duration-% \
87+
Short variant: n/a
88+
89+
| Class | Properties |
90+
| --------------------------- | --------------------------- |
91+
| animation-duration-none | animation-duration: 0ms; |
92+
| animation-duration-100 | animation-duration: 100ms; |
93+
| animation-duration-200 | animation-duration: 200ms; |
94+
| animation-duration-300 | animation-duration: 300ms; |
95+
| animation-duration-400 | animation-duration: 400ms; |
96+
| animation-duration-500 | animation-duration: 500ms; |
97+
| animation-duration-600 | animation-duration: 600ms; |
98+
| animation-duration-700 | animation-duration: 700ms; |
99+
| animation-duration-800 | animation-duration: 800ms; |
100+
| animation-duration-900 | animation-duration: 900ms; |
101+
| animation-duration-1000 | animation-duration: 1000ms; |
102+
| animation-duration-[1500ms] | animation-duration: 1500ms; |
103+
| animation-duration-[2s] | animation-duration: 2s; |
93104

94105
## Animation iteration count
95106

96-
| Class | Properties |
97-
| ---------------------------- | ------------------------------------ |
98-
| animation-iteration-none | animation-iteration-count: 0; |
99-
| animation-iteration-1x | animation-iteration-count: 1; |
100-
| animation-iteration-2x | animation-iteration-count: 2; |
101-
| animation-iteration-infinite | animation-iteration-count: infinite; |
107+
Long variant: animation-iteration-% \
108+
Short variant: iterate-%
109+
110+
| Class | Properties |
111+
| ---------------- | ------------------------------------ |
112+
| iterate-none | animation-iteration-count: 0; |
113+
| iterate-1 | animation-iteration-count: 1; |
114+
| iterate-2 | animation-iteration-count: 2; |
115+
| iterate-[10] | animation-iteration-count: 10; |
116+
| iterate-infinite | animation-iteration-count: infinite; |
102117

103118
## Animation timing function
104119

105-
| Class | Properties |
106-
| ---------------------------- | --------------------------------------- |
107-
| animation-timing-ease | animation-timing-function: ease; |
108-
| animation-timing-ease-in | animation-timing-function: ease-in; |
109-
| animation-timing-ease-out | animation-timing-function: ease-out; |
110-
| animation-timing-ease-in-out | animation-timing-function: ease-in-out; |
120+
Long variant: animation-timing-% \
121+
Short variant: timing-%
122+
123+
| Class | Properties |
124+
| ------------------------------------ | ----------------------------------------------------------- |
125+
| timing-linear | animation-timing-function: linear; |
126+
| timing-ease | animation-timing-function: ease; |
127+
| timing-ease-in | animation-timing-function: ease-in; |
128+
| timing-ease-out | animation-timing-function: ease-out; |
129+
| timing-ease-in-out | animation-timing-function: ease-in-out; |
130+
| timing-step-start | animation-timing-function: step-start; |
131+
| timing-step-end | animation-timing-function: step-end; |
132+
| timing-ease-in-out-back | animation-timing-function: cubic-bezier(.68,-.55,.265,1.55) |
133+
| timing-[cubic-bezier(0.1,0.7,1,0.1)] | animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1); |
111134

112135
## Animation direction
113136

114-
| Class | Properties |
115-
| ------------------------------------- | --------------------------------------- |
116-
| animation-direction-normal | animation-direction: normal; |
117-
| animation-direction-reverse | animation-direction: reverse; |
118-
| animation-direction-alternate | animation-direction: alternate; |
119-
| animation-direction-alternate-reverse | animation-direction: alternate-reverse; |
137+
Long variant: animation-direction-% \
138+
Short variant: direction-%
139+
140+
| Class | Properties |
141+
| --------------------------- | --------------------------------------- |
142+
| direction-normal | animation-direction: normal; |
143+
| direction-reverse | animation-direction: reverse; |
144+
| direction-alternate | animation-direction: alternate; |
145+
| direction-alternate-reverse | animation-direction: alternate-reverse; |
120146

121147
## Animation fill mode
122148

123-
| Class | Properties |
124-
| ------------------------ | ------------------------------- |
125-
| animation-fill-none | animation-fill-mode: none; |
126-
| animation-fill-forwards | animation-fill-mode: forwards; |
127-
| animation-fill-backwards | animation-fill-mode: backwards; |
128-
| animation-fill-both | animation-fill-mode: both; |
149+
Long variant: animation-fill-% \
150+
Short variant: fillmode-%
151+
152+
| Class | Properties |
153+
| ------------------------- | ------------------------------------ |
154+
| fillmode-none | animation-fill-mode: none; |
155+
| fillmode-forwards | animation-fill-mode: forwards; |
156+
| fillmode-backwards | animation-fill-mode: backwards; |
157+
| fillmode-both | animation-fill-mode: both; |
158+
| fillmode-[none,backwards] | animation-fill-mode: none, backwards |
129159

130160
## Animation play state
131161

132-
| Class | Properties |
133-
| ------------------------ | ------------------------------ |
134-
| animation-state-paused | animation-play-state: paused; |
135-
| animation-state-running | animation-play-state: running; |
162+
Long variant: animation-state-% \
163+
Short variant: playstate-%
164+
165+
| Class | Properties |
166+
| ------------------ | ------------------------------ |
167+
| playstate-paused | animation-play-state: paused; |
168+
| playstate-running | animation-play-state: running; |

‎demo/.editorconfig

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = lf
6+
insert_final_newline = true
7+
indent_style = space
8+
indent_size = 4
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false
13+
14+
[*.js]
15+
indent_size = 2

‎demo/index.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link href="./tailwind.css" rel="stylesheet" />
7+
<title>TailwindCSS animation demo</title>
8+
</head>
9+
<body class="p-10">
10+
<div class="mx-auto max-w-4xl flex flex-wrap gap-4">
11+
<div class="w-10 h-10 bg-red-500 animate-spin"></div>
12+
<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>
13+
<div class="w-10 h-10 bg-green-500 animate-spin animation-duration-400"></div>
14+
<div class="w-10 h-10 bg-blue-500 animate-spin timing-ease-in">2</div>
15+
<div class="w-10 h-10 bg-blue-500 animate-spin timing-cubic">3</div>
16+
<div class="w-10 h-10 bg-indigo-500 animate-spin iterate-none"></div>
17+
<div class="w-10 h-10 bg-indigo-500 animate-spin iterate-1"></div>
18+
<div class="w-10 h-10 bg-indigo-500 animate-spin iterate-none"></div>
19+
<div class="w-10 h-10 bg-indigo-500 animate-spin iterate-1"></div>
20+
<div class="w-10 h-10 bg-purple-500 animate-spin direction-reverse"></div>
21+
<div class="w-10 h-10 bg-pink-500 animate-spin animation-delay-1000"></div>
22+
<div class="w-10 h-10 bg-black animate-spin playstate-paused lg:playstate-running"></div>
23+
<div class="w-10 h-10 bg-black animate-reveal-up fillmode-forwards"></div>
24+
<div class="w-10 h-10 bg-black animate-reveal-up fillmode-backwards"></div>
25+
<div class="w-10 h-10 bg-black animate-reveal-up fillmode-both"></div>
26+
<div class="w-10 h-10 bg-pink-100 animate-spin animation-delay-[1200ms]">D</div>
27+
<div class="w-10 h-10 bg-pink-100 animate-spin animation-duration-[1200ms]">D</div>
28+
<div class="w-10 h-10 bg-pink-100 animate-spin iterate-[3]">D</div>
29+
<div class="w-10 h-10 bg-pink-100 animate-reveal-up timing-[cubic-bezier(0.1,0.7,1,0.1)]">D2</div>
30+
<div class="w-10 h-10 bg-pink-100 animate-reveal-up iterate-infinite timing-step-start">D2</div>
31+
<div class="w-10 h-10 bg-pink-100 animate-reveal-up iterate-infinite timing-step-end">D2</div>
32+
<div class="w-10 h-10 bg-pink-100 animate-reveal-up iterate-infinite timing-[steps(2,jump-start)]">D2</div>
33+
<div class="w-10 h-10 bg-pink-100 animate-spin fillmode-[none,backwards]">D</div>
34+
<div class="w-10 h-10 bg-pink-100 animate-spin fillmode-delay-200 fillmode-[none,backwards]">D</div>
35+
<div class="w-10 h-10 bg-blue-500 animate-spin timing-ease">1</div>
36+
<div class="w-10 h-10 bg-blue-500 animate-spin timing-ease-in">1</div>
37+
<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>
38+
<div class="w-10 h-10 bg-green-500 animate-spin timing-ease-in-out-back">1</div>
39+
40+
<h3 class="w-full text-xl mt-10 mb-2">Compatibility (long classname syntax)</h3>
41+
<div class="w-10 h-10 bg-red-500 animate-spin"></div>
42+
<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>
43+
<div class="w-10 h-10 bg-green-500 animate-spin animation-duration-400"></div>
44+
<div class="w-10 h-10 bg-blue-500 animate-spin animation-timing-ease-in">2</div>
45+
<div class="w-10 h-10 bg-blue-500 animate-spin animation-timing-cubic">3</div>
46+
<div class="w-10 h-10 bg-indigo-500 animate-spin animation-iteration-none"></div>
47+
<div class="w-10 h-10 bg-indigo-500 animate-spin animation-iteration-1"></div>
48+
<div class="w-10 h-10 bg-indigo-500 animate-spin animation-iteration-none"></div>
49+
<div class="w-10 h-10 bg-indigo-500 animate-spin animation-iteration-1"></div>
50+
<div class="w-10 h-10 bg-purple-500 animate-spin animation-direction-reverse"></div>
51+
<div class="w-10 h-10 bg-pink-500 animate-spin animation-delay-1000"></div>
52+
<div class="w-10 h-10 bg-black animate-spin animation-state-paused lg:animation-state-running"></div>
53+
<div class="w-10 h-10 bg-black animate-reveal-up animation-fill-forwards"></div>
54+
<div class="w-10 h-10 bg-black animate-reveal-up animation-fill-backwards"></div>
55+
<div class="w-10 h-10 bg-black animate-reveal-up animation-fill-both"></div>
56+
<div class="w-10 h-10 bg-pink-100 animate-spin animation-delay-[1200ms]">D</div>
57+
<div class="w-10 h-10 bg-pink-100 animate-spin animation-duration-[1200ms]">D</div>
58+
<div class="w-10 h-10 bg-pink-100 animate-spin animation-iteration-[3]">D</div>
59+
<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>
60+
<div class="w-10 h-10 bg-pink-100 animate-reveal-up animation-iteration-infinite animation-timing-step-start">D2</div>
61+
<div class="w-10 h-10 bg-pink-100 animate-reveal-up animation-iteration-infinite animation-timing-step-end">D2</div>
62+
<div class="w-10 h-10 bg-pink-100 animate-reveal-up animation-iteration-infinite animation-timing-[steps(2,jump-start)]">D2</div>
63+
<div class="w-10 h-10 bg-pink-100 animate-spin animation-fill-[none,backwards]">D</div>
64+
<div class="w-10 h-10 bg-pink-100 animate-spin animation-fill-delay-200 animation-fill-[none,backwards]">D</div>
65+
<div class="w-10 h-10 bg-blue-500 animate-spin animation-timing-ease">1</div>
66+
<div class="w-10 h-10 bg-blue-500 animate-spin animation-timing-ease-in">1</div>
67+
<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>
68+
<div class="w-10 h-10 bg-green-500 animate-spin animation-timing-ease-in-out-back">1</div>
69+
</div>
70+
</body>
71+
</html>

‎demo/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "demo",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"watch": "npx tailwindcss -o tailwind.css --watch",
8+
"dev": "npx tailwindcss -o ./tailwind.css"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"tailwindcss": "^3.2.7",
15+
"tailwindcss-animation": "link:../"
16+
},
17+
"dependencies": {
18+
"postcss": "^8.4.21"
19+
}
20+
}

‎demo/tailwind.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
'./*.html',
5+
],
6+
theme: {
7+
extend: {
8+
animationTiming: {
9+
cubic: 'cubic-bezier(0, 0, 0.2, 1)',
10+
},
11+
animation: {
12+
'reveal-up': 'reveal-up 500ms cubic-bezier(.13, .84, .82, 1)',
13+
},
14+
keyframes: {
15+
'reveal-up': {
16+
'0%, 50%': { opacity: '0', transform: 'translateY(0.8rem)', background: 'blue' },
17+
'100%': { opacity: '1', transform: 'translateY(0)', background: 'red' },
18+
},
19+
}
20+
},
21+
},
22+
plugins: [
23+
require('tailwindcss-animation'),
24+
],
25+
}

0 commit comments

Comments
 (0)