File tree Expand file tree Collapse file tree 2 files changed +62
-77
lines changed Expand file tree Collapse file tree 2 files changed +62
-77
lines changed Original file line number Diff line number Diff line change @@ -14,19 +14,12 @@ install animate-css-styled-components
14
14
15
15
## How to use
16
16
17
- import animate-css-styled-components module calling global animations or a specific animation
17
+ import animate-css-styled-components module calling global animations
18
18
19
19
```
20
20
import { Wobble, FadeIn, FadeOut } from 'animate-css-styled-components';
21
21
```
22
22
23
- or
24
-
25
- ```
26
- import Wobble from 'animate-css-styled-components/Especials/Wobble';
27
- ```
28
-
29
-
30
23
###### See how import specifics animations [ here] ( https://github.com/dielduarte/animate-css-styled-components/tree/master/docs/specific-animations ) .
31
24
32
25
Now, this animation is a component and you can encompassing the desired content within the component.
Original file line number Diff line number Diff line change 6
6
## Attention
7
7
8
8
```
9
- import AnimationType from 'animate-css-styled-components/Attention/AnimationType ';
9
+ import { AnimationType } from 'animate-css-styled-components';
10
10
```
11
11
#### Animations types
12
12
- Flash
22
22
## Bounce
23
23
24
24
```
25
- import AnimationType from 'animate-css-styled-components/Bounce/AnimationType ';
25
+ import { AnimationType } from 'animate-css-styled-components';
26
26
```
27
27
#### Animations types
28
28
- Bounce
29
- - For Bounce animation just import the index file:
30
- ```
31
- import Bounce from 'animate-css-styled-components/Bounce';
32
- ```
33
29
- BounceIn
34
30
- BounceInDown
35
31
- BounceInLeft
45
41
## Especials
46
42
47
43
```
48
- import AnimationType from 'animate-css-styled-components/Especials/AnimationType ';
44
+ import { AnimationType } from 'animate-css-styled-components';
49
45
```
50
46
#### Animations types
51
47
- Hinge
56
52
## Fade
57
53
58
54
```
59
- import AnimationType from 'animate-css-styled-components/Fade/AnimationType ';
55
+ import { AnimationType } from 'animate-css-styled-components';
60
56
```
61
57
#### Animations types
62
- - In
63
- - InDown
64
- - InDownBig
65
- - InLeft
66
- - InLeftBig
67
- - InRight
68
- - InRightBig
69
- - InUp
70
- - InUpBig
71
- - Out
72
- - OutDown
73
- - OutDownBig
74
- - OutLeft
75
- - OutLeftBig
76
- - OutRight
77
- - OutRightBig
78
- - OutUp
79
- - OutUpBig
58
+ - FadeIn
59
+ - FadeInDown
60
+ - FadeInDownBig
61
+ - FadeInLeft
62
+ - FadeInLeftBig
63
+ - FadeInRight
64
+ - FadeInRightBig
65
+ - FadeInUp
66
+ - FadeInUpBig
67
+ - FadeOut
68
+ - FadeOutDown
69
+ - FadeOutDownBig
70
+ - FadeOutLeft
71
+ - FadeOutLeftBig
72
+ - FadeOutRight
73
+ - FadeOutRightBig
74
+ - FadeOutUp
75
+ - FadeOutUpBig
80
76
81
77
## Flip
82
78
83
79
```
84
- import AnimationType from 'animate-css-styled-components/Flip/AnimationType ';
80
+ import { AnimationType } from 'animate-css-styled-components';
85
81
```
86
82
#### Animations types
87
83
88
84
- Flip
89
- - For Flip animation just import the index file:
90
- ```
91
- import Flip from 'animate-css-styled-components/Flip';
92
- ```
93
- - InX
94
- - InY
95
- - OutX
96
- - OutY
85
+ - FlipInX
86
+ - FlipInY
87
+ - FlipOutX
88
+ - FlipOutY
97
89
98
90
## LightSpeed
99
91
100
92
```
101
- import AnimationType from 'animate-css-styled-components/LightSpeed/AnimationType ';
93
+ import { AnimationType } from 'animate-css-styled-components';
102
94
```
103
95
#### Animations types
104
96
105
- - In
106
- - Out
97
+ - LightSpeedIn
98
+ - LightSpeedOut
107
99
108
100
109
101
## Rotate
110
102
111
103
```
112
- import AnimationType from 'animate-css-styled-components/Rotate/AnimationType ';
104
+ import { AnimationType } from 'animate-css-styled-components';
113
105
```
114
106
#### Animations types
115
107
116
- - In
117
- - InDownLeft
118
- - InDownRight
119
- - InUpLeft
120
- - InUpRight
121
- - Out
122
- - OutDownLeft
123
- - OutDownRight
124
- - OutUpLeft
125
- - OutUpRight
108
+ - RotateIn
109
+ - RotateInDownLeft
110
+ - RotateInDownRight
111
+ - RotateInUpLeft
112
+ - RotateInUpRight
113
+ - RotateOut
114
+ - RotateOutDownLeft
115
+ - RotateOutDownRight
116
+ - RotateOutUpLeft
117
+ - RotateOutUpRight
126
118
127
119
128
120
129
121
## Slide
130
122
131
123
```
132
- import AnimationType from 'animate-css-styled-components/Slide/AnimationType ';
124
+ import { AnimationType } from 'animate-css-styled-components';
133
125
```
134
126
#### Animations types
135
127
136
- - InDown
137
- - InLeft
138
- - InRight
139
- - InUp
140
- - OutDown
141
- - OutLeft
142
- - OutRight
143
- - OutUp
128
+ - SlideInDown
129
+ - SlideInLeft
130
+ - SlideInRight
131
+ - SlideInUp
132
+ - SlideOutDown
133
+ - SlideOutLeft
134
+ - SlideOutRight
135
+ - SlideOutUp
144
136
145
137
146
138
## Zoom
147
139
148
140
```
149
- import AnimationType from 'animate-css-styled-components/Zoom/AnimationType ';
141
+ import { AnimationType } from 'animate-css-styled-components';
150
142
```
151
143
#### Animations types
152
144
153
- - In
154
- - InDown
155
- - InLeft
156
- - InRight
157
- - InUp
158
- - Out
159
- - OutDown
160
- - OutLeft
161
- - OutRight
162
- - OutUp
145
+ - ZoomIn
146
+ - ZoomInDown
147
+ - ZoomInLeft
148
+ - ZoomInRight
149
+ - ZoomInUp
150
+ - ZoomOut
151
+ - ZoomOutDown
152
+ - ZoomOutLeft
153
+ - ZoomOutRight
154
+ - ZoomOutUp
You can’t perform that action at this time.
0 commit comments