Skip to content

Commit 762f088

Browse files
bentzibentzbentzibentz
committed
add new animate.css animations
1 parent 1458129 commit 762f088

8 files changed

Lines changed: 479 additions & 110 deletions

File tree

‎README.md‎

Lines changed: 122 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@ npm install tailwindcss-animatecss
2222
yarn add tailwindcss-animatecss
2323
```
2424

25+
Use animatecss < v4:
26+
27+
```bash
28+
npm install [email protected]
29+
```
30+
31+
```bash
32+
yarn add [email protected]
33+
```
34+
2535
## Usage
2636

2737
Add Tailwind CSS to your project as described [here](https://tailwindcss.com/docs/installation).
@@ -45,7 +55,7 @@ plugins: [
4555
]
4656
```
4757

48-
You want to determine yourself which classes are used? You just have to set these class names at the classes array. Caution, class names without dot, for example if you want ```.fade``` just add ```fade``` to the array.
58+
You want to determine yourself which classes are used? You just have to set these class names at the classes array. Caution, class names without dot and without the ```animate``` prefix, for example if you want ```.animate__fade``` just add ```fade``` to the array.
4959
You can find all available class names further down.
5060

5161
Defining the classes is recommended to avoid to bloat your css with unused classes and keyframes.
@@ -101,96 +111,117 @@ plugins: [
101111

102112

103113
### Available Animate CSS classes
104-
* .animated
105-
* .infinite
106-
* .delay
107-
* .delay-1
108-
* .delay-2
109-
* .delay-3
110-
* .delay-4
111-
* .delay-5
112-
* .fast
113-
* .faster
114-
* .slow
115-
* .slower
116-
* .bounce
117-
* .flash
118-
* .pulse
119-
* .rubberBand
120-
* .shake
121-
* .headShakte
122-
* .swing
123-
* .tada
124-
* .wobble
125-
* .jello
126-
* .heartBeat
127-
* .hinge
128-
* .jackInTheBox
129-
* .lightSpeedIn
130-
* .lightSpeedOut
131-
* .flip
132-
* .flipInX
133-
* .flipInY
134-
* .flipOutX
135-
* .flipOutY
136-
* .rotateIn
137-
* .rotateInDownLeft
138-
* .rotateInDownRight
139-
* .rotateInUpLeft
140-
* .rotateInUpRight
141-
* .rotateOut
142-
* .rotateOutDownLeft
143-
* .rotateOutDownRight
144-
* .rotateOutUpLeft
145-
* .rotateOutUpRight
146-
* .rollIn
147-
* .rollOut
148-
* .zoomIn
149-
* .zoomInUp
150-
* .zoomInDown
151-
* .zoomInLeft
152-
* .zoomInRight
153-
* .bounceIn
154-
* .bounceInDown
155-
* .bounceInUp
156-
* .bounceInLeft
157-
* .bounceInRight
158-
* .bounceOut
159-
* .bounceOutDown
160-
* .bounceOutUp
161-
* .bounceOutLeft
162-
* .bounceOutRight
163-
* .slideInDown
164-
* .slideInLeft
165-
* .slideInRight
166-
* .slideInUp
167-
* .slideOutDown
168-
* .slideOutLeft
169-
* .slideOutRight
170-
* .slideOutUp
171-
* .fadeIn
172-
* .fadeInDown
173-
* .fadeInDownBig
174-
* .fadeInLeft
175-
* .fadeInLeftBig
176-
* .fadeInRight
177-
* .fadeInRightBig
178-
* .fadeInUp
179-
* .fadeInUpBig
180-
* .fadeOut
181-
* .fadeOutDown
182-
* .fadeOutDownBig
183-
* .fadeOutLeft
184-
* .fadeOutLeftBig
185-
* .fadeOutRight
186-
* .fadeOutRightBig
187-
* .fadeOutUp
188-
* .fadeOutUpBig
189-
* .zoomOutDown
190-
* .zoomOutLeft
191-
* .zoomOutRight
192-
* .zoomOut
193-
* .zoomOutUp
114+
* .animate__animated
115+
* .animate__infinite
116+
* .animate__delay
117+
* .animate__delay-1
118+
* .animate__delay-2
119+
* .animate__delay-3
120+
* .animate__delay-4
121+
* .animate__delay-5
122+
* .animate__fast
123+
* .animate__faster
124+
* .animate__slow
125+
* .animate__slower
126+
* .animate__bounce
127+
* .animate__flash
128+
* .animate__pulse
129+
* .animate__rubberBand
130+
* .animate__shakeY
131+
* .animate__shakeX
132+
* .animate__headShake
133+
* .animate__swing
134+
* .animate__tada
135+
* .animate__wobble
136+
* .animate__jello
137+
* .animate__heartBeat
138+
* .animate__hinge
139+
* .animate__jackInTheBox
140+
* .animate__lightSpeedIn
141+
* .animate__lightSpeedOut
142+
* .animate__flip
143+
* .animate__flipInX
144+
* .animate__flipInY
145+
* .animate__flipOutX
146+
* .animate__flipOutY
147+
* .animate__rotateIn
148+
* .animate__rotateInDownLeft
149+
* .animate__rotateInDownRight
150+
* .animate__rotateInUpLeft
151+
* .animate__rotateInUpRight
152+
* .animate__rotateOut
153+
* .animate__rotateOutDownLeft
154+
* .animate__rotateOutDownRight
155+
* .animate__rotateOutUpLeft
156+
* .animate__rotateOutUpRight
157+
* .animate__rollIn
158+
* .animate__rollOut
159+
* .animate__zoomIn
160+
* .animate__zoomInUp
161+
* .animate__zoomInDown
162+
* .animate__zoomInLeft
163+
* .animate__zoomInRight
164+
* .animate__bounceIn
165+
* .animate__bounceInDown
166+
* .animate__bounceInUp
167+
* .animate__bounceInLeft
168+
* .animate__bounceInRight
169+
* .animate__bounceOut
170+
* .animate__bounceOutDown
171+
* .animate__bounceOutUp
172+
* .animate__bounceOutLeft
173+
* .animate__bounceOutRight
174+
* .animate__slideInDown
175+
* .animate__slideInLeft
176+
* .animate__slideInRight
177+
* .animate__slideInUp
178+
* .animate__slideOutDown
179+
* .animate__slideOutLeft
180+
* .animate__slideOutRight
181+
* .animate__slideOutUp
182+
* .animate__fadeIn
183+
* .animate__fadeInDown
184+
* .animate__fadeInDownBig
185+
* .animate__fadeInLeft
186+
* .animate__fadeInLeftBig
187+
* .animate__fadeInRight
188+
* .animate__fadeInRightBig
189+
* .animate__fadeInUp
190+
* .animate__fadeInUpBig
191+
* .animate__fadeInTopLeft
192+
* .animate__fadeInTopRight
193+
* .animate__fadeInBottomLeft
194+
* .animate__fadeInBottomRight
195+
* .animate__fadeOut
196+
* .animate__fadeOutDown
197+
* .animate__fadeOutDownBig
198+
* .animate__fadeOutLeft
199+
* .animate__fadeOutLeftBig
200+
* .animate__fadeOutRight
201+
* .animate__fadeOutRightBig
202+
* .animate__fadeOutUp
203+
* .animate__fadeOutUpBig
204+
* .animate__fadeOutTopLeft
205+
* .animate__fadeOutTopRight
206+
* .animate__fadeOutBottomLeft
207+
* .animate__fadeOutBottomRight
208+
* .animate__zoomOutDown
209+
* .animate__zoomOutLeft
210+
* .animate__zoomOutRight
211+
* .animate__zoomOut
212+
* .animate__zoomOutUp
213+
* .animate__lightSpeedInRight
214+
* .animate__lightSpeedInLeft
215+
* .animate__lightSpeedOutRight
216+
* .animate__lightSpeedOutLeft
217+
* .animate__backInDown
218+
* .animate__backInUp
219+
* .animate__backInLeft
220+
* .animate__backInRight
221+
* .animate__backOutDown
222+
* .animate__backOutUp
223+
* .animate__backOutLeft
224+
* .animate__backOutRight
194225

195226
## Credits
196227

‎animate/animate.js‎

Lines changed: 76 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ const keyframesSlideIn = require('./keyframes/slideIn');
1212
const keyframesSlideOut = require('./keyframes/slideOut');
1313
const keyframesFadeIn = require('./keyframes/fadeIn');
1414
const keyframesFadeOut = require('./keyframes/fadeOut');
15+
const keyframesBackIn = require('./keyframes/backIn');
16+
const keyframesBackOut = require('./keyframes/backOut');
1517

1618
module.exports = function ({ classes = [], settings = {}, variants = ['responsive'] }) {
1719
return function ({ e, addUtilities, prefix, addVariant, postcss }) {
@@ -35,7 +37,8 @@ module.exports = function ({ classes = [], settings = {}, variants = ['responsiv
3537
'@keyframes flash': keyframes.keyframeFlash,
3638
'@keyframes pulse': keyframes.keyframePulse,
3739
'@keyframes rubberBand': keyframes.keyframeRubberBand,
38-
'@keyframes shake': keyframes.keyframeShake,
40+
'@keyframes shakeX': keyframes.keyframeShakeX,
41+
'@keyframes shakeY': keyframes.keyframeShakeY,
3942
'@keyframes headShake': keyframes.keyframeHeadShake,
4043
'@keyframes swing': keyframes.keyframeSwing,
4144
'@keyframes tada': keyframes.keyframeTada,
@@ -44,8 +47,10 @@ module.exports = function ({ classes = [], settings = {}, variants = ['responsiv
4447
'@keyframes heartBeat': keyframes.keyframeHeartBeat,
4548
'@keyframes hinge': keyframes.keyframeHinge,
4649
'@keyframes jackInTheBox': keyframes.keyframeJackInTheBox,
47-
'@keyframes lightSpeedIn': keyframesLightSpeed.keyframeLightSpeedIn,
48-
'@keyframes lightSpeedOut': keyframesLightSpeed.keyframeLightSpeedOut,
50+
'@keyframes lightSpeedInLeft': keyframesLightSpeed.keyframeLightSpeedInLeft,
51+
'@keyframes lightSpeedInRight': keyframesLightSpeed.keyframeLightSpeedInRight,
52+
'@keyframes lightSpeedOutLeft': keyframesLightSpeed.keyframeLightSpeedOutLeft,
53+
'@keyframes lightSpeedOutRight': keyframesLightSpeed.keyframeLightSpeedOutRight,
4954
'@keyframes flip': keyframesFlip.keyframeFlip,
5055
'@keyframes flipInX': keyframesFlip.keyframeFlipInX,
5156
'@keyframes flipInY': keyframesFlip.keyframeFlipInY,
@@ -98,6 +103,10 @@ module.exports = function ({ classes = [], settings = {}, variants = ['responsiv
98103
'@keyframes fadeInLeftBig': keyframesFadeIn.keyframeFadeInLeftBig,
99104
'@keyframes fadeInRight': keyframesFadeIn.keyframeFadeInRight,
100105
'@keyframes fadeInRightBig': keyframesFadeIn.keyframeFadeInRightBig,
106+
'@keyframes fadeInTopLeft': keyframesFadeIn.keyframeFadeInTopLeft,
107+
'@keyframes fadeInTopRight': keyframesFadeIn.keyframeFadeInTopRight,
108+
'@keyframes fadeInBottomLeft': keyframesFadeIn.keyframeFadeInBottomLeft,
109+
'@keyframes fadeInBottomRight': keyframesFadeIn.keyframeFadeInBottomRight,
101110
'@keyframes fadeInUp': keyframesFadeIn.keyframeFadeInUp,
102111
'@keyframes fadeInUpBig': keyframesFadeIn.keyframeFadeInUpBig,
103112
'@keyframes fadeOut': keyframesFadeOut.keyframeFadeOut,
@@ -108,7 +117,19 @@ module.exports = function ({ classes = [], settings = {}, variants = ['responsiv
108117
'@keyframes fadeOutRight': keyframesFadeOut.keyframeFadeOutRight,
109118
'@keyframes fadeOutRightBig': keyframesFadeOut.keyframeFadeOutRightBig,
110119
'@keyframes fadeOutUp': keyframesFadeOut.keyframeFadeOutUp,
111-
'@keyframes fadeOutUpBig': keyframesFadeOut.keyframeFadeOutUpBig
120+
'@keyframes fadeOutUpBig': keyframesFadeOut.keyframeFadeOutUpBig,
121+
'@keyframes fadeOutTopLeft': keyframesFadeOut.keyframeFadeOutTopLeft,
122+
'@keyframes fadeOutTopRight': keyframesFadeOut.keyframeFadeOutTopRight,
123+
'@keyframes fadeOutBottomLeft': keyframesFadeOut.keyframeFadeOutBottomLeft,
124+
'@keyframes fadeOutBottomRight': keyframesFadeOut.keyframeFadeOutBottomRight,
125+
'@keyframes backInDown': keyframesBackIn.keyframeBackInDown,
126+
'@keyframes backInUp': keyframesBackIn.keyframeBackInUp,
127+
'@keyframes backInLeft': keyframesBackIn.keyframeBackInLeft,
128+
'@keyframes backInRight': keyframesBackIn.keyframeBackInRight,
129+
'@keyframes backOutDown': keyframesBackOut.keyframeBackOutDown,
130+
'@keyframes backOutUp': keyframesBackOut.keyframeBackOutUp,
131+
'@keyframes backOutLeft': keyframesBackOut.keyframeBackOutLeft,
132+
'@keyframes backOutRight': keyframesBackOut.keyframeBackOutRight,
112133
}
113134

114135
const fallbackUtilities = {
@@ -171,8 +192,11 @@ module.exports = function ({ classes = [], settings = {}, variants = ['responsiv
171192
'.animate__rubberBand': {
172193
animationName: 'rubberBand',
173194
},
174-
'.animate__shake': {
175-
animationName: 'shake',
195+
'.animate__shakeX': {
196+
animationName: 'shakeX',
197+
},
198+
'.animate__shakeY': {
199+
animationName: 'shakeY',
176200
},
177201
'.animate__headShake': {
178202
animationTimingFunction: 'ease-in-out',
@@ -203,11 +227,17 @@ module.exports = function ({ classes = [], settings = {}, variants = ['responsiv
203227
'.animate__jackInTheBox': {
204228
animationName: 'jackInTheBox',
205229
},
206-
'.animate__lightSpeedIn': {
207-
animationName: 'lightSpeedIn',
230+
'.animate__lightSpeedInLeft': {
231+
animationName: 'lightSpeedInLeft',
232+
},
233+
'.animate__lightSpeedInRight': {
234+
animationName: 'lightSpeedInRight',
208235
},
209-
'.animate__lightSpeedOut': {
210-
animationName: 'lightSpeedOut',
236+
'.animate__lightSpeedOutLeft': {
237+
animationName: 'lightSpeedOutLeft',
238+
},
239+
'.animate__lightSpeedOutRight': {
240+
animationName: 'lightSpeedOutRight',
211241
},
212242
'.animate__flip': {
213243
animationName: 'flip',
@@ -374,6 +404,18 @@ module.exports = function ({ classes = [], settings = {}, variants = ['responsiv
374404
'.animate__fadeInUpBig': {
375405
animationName: 'fadeInUpBig'
376406
},
407+
'.animate__fadeInTopLeft': {
408+
animationName: 'fadeInTopLeft'
409+
},
410+
'.animate__fadeInTopRight': {
411+
animationName: 'fadeInTopRight'
412+
},
413+
'.animate__fadeInBottomLeft': {
414+
animationName: 'fadeInBottomLeft'
415+
},
416+
'.animate__fadeInBottomRight': {
417+
animationName: 'fadeInBottomRight'
418+
},
377419
'.animate__fadeOut': {
378420
animationName: 'fadeOut'
379421
},
@@ -401,6 +443,30 @@ module.exports = function ({ classes = [], settings = {}, variants = ['responsiv
401443
'.animate__fadeOutUpBig': {
402444
animationName: 'fadeOutUpBig'
403445
},
446+
'.animate__backInUp': {
447+
animationName: 'backInUp'
448+
},
449+
'.animate__backInDown': {
450+
animationName: 'backInDown'
451+
},
452+
'.animate__backInLeft': {
453+
animationName: 'backInLeft'
454+
},
455+
'.animate__backInRight': {
456+
animationName: 'backInRight'
457+
},
458+
'.animate__backOutUp': {
459+
animationName: 'backOutUp'
460+
},
461+
'.animate__backOutDown': {
462+
animationName: 'backOutDown'
463+
},
464+
'.animate__backOutLeft': {
465+
animationName: 'backOutLeft'
466+
},
467+
'.animate__backOutRight': {
468+
animationName: 'backOutRight'
469+
},
404470
}
405471

406472
let utilities = {};

0 commit comments

Comments
 (0)