0
# CSS Integration
1

2
CSS integration for React Native Reanimated provides web-compatible CSS animation and styling features that work across platforms. This module enables developers to use familiar CSS animation syntax and keyframes for creating animations.
3

4
## Capabilities
5

6
### CSS Stylesheet Creation
7

8
Create CSS stylesheets with animation support and keyframes integration.
9

10
```typescript { .api }
11
/**
12
 * Creates a stylesheet similar to React Native's StyleSheet.create with CSS animation support
13
 * @param styles - Named styles object with CSS animation properties
14
 * @returns Processed stylesheet with CSS animation support
15
 */
16
function create<T extends NamedStyles<T>>(styles: T & NamedStyles<any>): T;
17

18
type NamedStyles<T> = { [P in keyof T]: CSSStyle };
19
```
20

21
**Usage Examples:**
22

23
```typescript
24
import { css } from "react-native-reanimated";
25

26
// Create styles with CSS animations
27
const styles = css.create({
28
  container: {
29
    animationName: fadeInKeyframes,
30
    animationDuration: "1s",
31
    animationTimingFunction: "ease-in-out",
32
  },
33
  button: {
34
    transitionProperty: "transform",
35
    transitionDuration: "0.3s",
36
    transitionTimingFunction: cubicBezier(0.4, 0, 0.2, 1),
37
  },
38
});
39
```
40

41
### CSS Keyframes
42

43
Define keyframe animations using CSS-compatible syntax.
44

45
```typescript { .api }
46
/**
47
 * Creates CSS keyframes for animations
48
 * @param keyframes - Keyframe definitions with percentage or named keys
49
 * @returns CSSKeyframesRule for use in animationName property
50
 */
51
function keyframes(keyframes: CSSAnimationKeyframes): CSSKeyframesRule;
52

53
interface CSSAnimationKeyframes {
54
  [key: string]: CSSStyle;
55
  from?: CSSStyle;
56
  to?: CSSStyle;
57
}
58
```
59

60
**Usage Examples:**
61

62
```typescript
63
import { css } from "react-native-reanimated";
64

65
// Define keyframes
66
const fadeIn = css.keyframes({
67
  from: { opacity: 0 },
68
  to: { opacity: 1 },
69
});
70

71
const slideUp = css.keyframes({
72
  "0%": { transform: "translateY(100px)", opacity: 0 },
73
  "50%": { transform: "translateY(-10px)", opacity: 0.8 },
74
  "100%": { transform: "translateY(0px)", opacity: 1 },
75
});
76

77
// Use in styles
78
const styles = css.create({
79
  animated: {
80
    animationName: [fadeIn, slideUp],
81
    animationDuration: "2s",
82
    animationFillMode: "forwards",
83
  },
84
});
85
```
86

87
### CSS Easing Functions
88

89
Advanced easing functions for CSS animations and transitions.
90

91
```typescript { .api }
92
/**
93
 * Creates a cubic bezier easing function
94
 * @param x1 - First control point x coordinate (0-1)
95
 * @param y1 - First control point y coordinate
96
 * @param x2 - Second control point x coordinate (0-1)
97
 * @param y2 - Second control point y coordinate
98
 * @returns CubicBezierEasing instance
99
 */
100
function cubicBezier(x1: number, y1: number, x2: number, y2: number): CubicBezierEasing;
101

102
/**
103
 * Creates a stepped easing function
104
 * @param stepsNumber - Number of steps in the function
105
 * @param modifier - Step modifier controlling timing
106
 * @returns StepsEasing instance
107
 */
108
function steps(stepsNumber: number, modifier?: StepsModifier): StepsEasing;
109

110
/**
111
 * Creates a linear easing function with control points
112
 * @param points - Control points for the linear function
113
 * @returns LinearEasing instance
114
 */
115
function linear(...points: ControlPoint[]): LinearEasing;
116

117
type StepsModifier = 'jump-start' | 'jump-end' | 'jump-none' | 'jump-both' | 'start' | 'end';
118
type ControlPoint = [number, number] | number;
119
```
120

121
**Usage Examples:**
122

123
```typescript
124
import { css, cubicBezier, steps, linear } from "react-native-reanimated";
125

126
// Predefined easing functions
127
const easeInOut = cubicBezier(0.4, 0, 0.2, 1);
128
const steppedAnimation = steps(4, 'jump-end');
129
const linearAnimation = linear(0, 0.25, 1);
130

131
// Use in styles
132
const styles = css.create({
133
  smooth: {
134
    transitionTimingFunction: easeInOut,
135
    transitionDuration: "0.3s",
136
  },
137
  stepped: {
138
    animationTimingFunction: steppedAnimation,
139
    animationDuration: "1s",
140
  },
141
  linear: {
142
    animationTimingFunction: linearAnimation,
143
    animationDuration: "2s",
144
  },
145
});
146
```
147

148
### CSS Animated Components
149

150
Create animated components with CSS animation support.
151

152
```typescript { .api }
153
/**
154
 * Creates an animated component with CSS animation capabilities
155
 * @param component - React component to animate
156
 * @returns Animated version of the component with CSS support
157
 */
158
function createAnimatedComponent<T>(component: T): AnimatedComponent<T>;
159
```
160

161
**Usage Examples:**
162

163
```typescript
164
import { createAnimatedComponent } from "react-native-reanimated";
165
import { View, Text } from "react-native";
166

167
// Create animated components
168
const AnimatedView = createAnimatedComponent(View);
169
const AnimatedText = createAnimatedComponent(Text);
170

171
// Use with CSS styles
172
const MyComponent = () => (
173
  <AnimatedView style={styles.container}>
174
    <AnimatedText style={styles.text}>
175
      Animated with CSS
176
    </AnimatedText>
177
  </AnimatedView>
178
);
179
```
180

181
## Types
182

183
### CSS Animation Types
184

185
```typescript { .api }
186
interface CSSStyle {
187
  // Animation properties
188
  animationName?: CSSAnimationKeyframes | CSSKeyframesRule | (CSSAnimationKeyframes | CSSKeyframesRule)[];
189
  animationDuration?: CSSAnimationDuration;
190
  animationTimingFunction?: CSSAnimationTimingFunction;
191
  animationDelay?: CSSAnimationDelay;
192
  animationIterationCount?: CSSAnimationIterationCount;
193
  animationDirection?: CSSAnimationDirection;
194
  animationFillMode?: CSSAnimationFillMode;
195
  animationPlayState?: CSSAnimationPlayState;
196
  
197
  // Transition properties
198
  transitionProperty?: CSSTransitionProperty;
199
  transitionDuration?: CSSTransitionDuration;
200
  transitionTimingFunction?: CSSTransitionTimingFunction;
201
  transitionDelay?: CSSTransitionDelay;
202
  
203
  // Other style properties...
204
  [key: string]: any;
205
}
206

207
interface CSSKeyframesRule {
208
  readonly name: string;
209
  readonly keyframes: CSSAnimationKeyframes;
210
}
211

212
type CSSAnimationDuration = string | number;
213
type CSSAnimationDelay = string | number;
214
type CSSAnimationIterationCount = number | 'infinite';
215
type CSSAnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
216
type CSSAnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both';
217
type CSSAnimationPlayState = 'running' | 'paused';
218
type CSSAnimationTimingFunction = string | CubicBezierEasing | StepsEasing | LinearEasing;
219
```
220

221
### CSS Transition Types
222

223
```typescript { .api }
224
type CSSTransitionProperty = string | string[];
225
type CSSTransitionDuration = string | number;
226
type CSSTransitionTimingFunction = string | CubicBezierEasing | StepsEasing | LinearEasing;
227
type CSSTransitionDelay = string | number;
228

229
interface CSSTransitionSettings {
230
  property?: CSSTransitionProperty;
231
  duration?: CSSTransitionDuration;
232
  timingFunction?: CSSTransitionTimingFunction;
233
  delay?: CSSTransitionDelay;
234
}
235

236
type CSSTransitionShorthand = string | CSSTransitionSettings | (string | CSSTransitionSettings)[];
237
```
238

239
### Easing Function Types
240

241
```typescript { .api }
242
interface CubicBezierEasing {
243
  readonly type: 'cubic-bezier';
244
  readonly x1: number;
245
  readonly y1: number;
246
  readonly x2: number;
247
  readonly y2: number;
248
}
249

250
interface StepsEasing {
251
  readonly type: 'steps';
252
  readonly steps: number;
253
  readonly modifier: StepsModifier;
254
}
255

256
interface LinearEasing {
257
  readonly type: 'linear';
258
  readonly points: ControlPoint[];
259
}
260
```