File tree Expand file tree Collapse file tree 1 file changed +15
-0
lines changed Expand file tree Collapse file tree 1 file changed +15
-0
lines changed Original file line number Diff line number Diff line change @@ -27,6 +27,9 @@ interface CSSAnimationProps {
27
27
style ?: CSSStyleDeclaration ;
28
28
}
29
29
30
+ /**
31
+ * A `spin` style object to an `Animated` component add a linear spinning animation. Great for loaders.
32
+ */
30
33
export const spin : CSSStyleDeclaration = {
31
34
animationName : {
32
35
to : {
@@ -50,6 +53,9 @@ export function Spin({
50
53
) ;
51
54
}
52
55
56
+ /**
57
+ * Add `ping` style object to an `Animated` component to make the element scale and fade. Great for attention grabbing elements like notifications.
58
+ */
53
59
export const ping : CSSStyleDeclaration = {
54
60
animationName : {
55
61
'75%, 100%' : {
@@ -74,6 +80,9 @@ export function Ping({
74
80
) ;
75
81
}
76
82
83
+ /**
84
+ * Add `pulse` style object to an `Animated` component to make it fade in and out. Great for skeleton loaders.
85
+ */
77
86
export const pulse : CSSStyleDeclaration = {
78
87
animationName : {
79
88
'50%' : {
@@ -97,6 +106,9 @@ export function Pulse({
97
106
) ;
98
107
}
99
108
109
+ /**
110
+ * Add `bounce` style object to an `Animated` component to make it bounce up and down. Great for scroll down indicators.
111
+ */
100
112
export const bounce : CSSStyleDeclaration = {
101
113
animationName : {
102
114
'0%, 100%' : {
@@ -124,6 +136,9 @@ export function Bounce({
124
136
) ;
125
137
}
126
138
139
+ /**
140
+ * Add `shimmer` style object to an `Animated` component to make it animate from left to right indefinitely. Great for shimmer loading effect.
141
+ */
127
142
export const shimmer : CSSStyleDeclaration = {
128
143
animationName : {
129
144
from : {
You can’t perform that action at this time.
0 commit comments