Expo Web
Search…
Primitives
Styling
Animations
Because RNWeb doesn't support the React Native LayoutAnimation API we need to use other methods for animating our components around the screen. A good alternative is the CSS Transitions API.
What can it do?
With CSS Animations in React Native (for web) we can create awesome effects with the components on the screen. When you define (at minimum) a component's
animationDuration style property, then any state change that effects that component's style will create an implicit interpolation between the old value and the new one.The API
The duration to wait before executing the transition associated with a new style value. The value is defined as a
string with the suffix "s" for seconds or "ms" milliseconds.Type: string | string[]
string | string[]Default: '0s'
'0s'Conversion
1
// CSS
2
- animation-delay: 650ms;
3
4
// React Native
5
+ animationDelay: "650ms",
Copied!
The direction value dictates if an animation should be played forwards, backwards or in alternate cycles.
Type: string | string[]
string | string[]Default: 'normal'
'normal'Values: 'alternate' | 'alternate-reverse' | 'normal' | 'reverse'
'alternate' | 'alternate-reverse' | 'normal' | 'reverse'Conversion
1
// CSS
2
- animation-direction: alternate-reverse;
3
4
// React Native
5
+ animationDirection: "alternate-reverse",
Copied!
The duration or durations of the animations after the
animationDelay has finished. The value is defined as a string with the suffix "s" for seconds or "ms" milliseconds.Type: string | string[]
string | string[]Default: '0s'
'0s'Conversion
1
// CSS
2
- animation-duration: 10s;
3
4
// React Native
5
+ animationDuration: "10s",
Copied!
The
animationFillMode CSS property sets how a CSS animation applies styles to its target before and after its execution.Type: string | string[]
string | string[]Default: 'forwards'
'forwards'Values: 'none' | 'forwards' | 'backwards' | 'both'
'none' | 'forwards' | 'backwards' | 'both'Conversion
1
// CSS
2
- animation-fill-mode: none;
3
4
// React Native
5
+ animationFillMode: "none",
Copied!
The
animationIterationCount CSS property sets the number of times an animation cycle should be played before stopping.If multiple values are specified, each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used.
Type: number | 'infinite' | Array<number, 'infinite'>
number | 'infinite' | Array<number, 'infinite'>Default: 1
1Values: <number> | 'infinite'
<number> | 'infinite'Conversion
1
// CSS
2
- animation-iteration-count: 2;
3
4
// React Native
5
+ animationIterationCount: 2,
Copied!
Used to control the intermediate steps in an animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.
Type: string | Object | Array<string, Object>
string | Object | Array<string, Object>Conversion
1
// CSS
2
3
- @keyframes demo {
4
- 0% { backgroundColor: "blue"; }
5
- 100% { backgroundColor: "red"; }
6
- }
7
8
- animation-name: demo;
9
10
// React Native
11
12
+ const demo = {
13
+ '0%': { backgroundColor: "blue" },
14
+ '100%': { backgroundColor: "red" },
15
+ }
16
17
+ animationKeyframes: demo,
Copied!
The
animationPlayState CSS property sets whether an animation is running or paused.Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.
Type: string | string[]
string | string[]Default: 'running'
'running'Values: 'paused' | 'running'
'paused' | 'running'Conversion
1
// CSS
2
- animation-play-state: running;
3
4
// React Native
5
+ animationPlayState: "running",
Copied!
The
animationTimingFunction CSS property sets how an animation progresses through the duration of each cycle.Type: string | string[]
string | string[]Default: 'normal'
'normal'Values:
"linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "step-start" | "step-end" | "steps(int,start|end)" | "cubic-bezier(n,n,n,n)"Conversion
1
// CSS
2
- animation-timing-function: ease-in;
3
4
// React Native
5
+ animationTimingFunction: "ease-in",
Copied!
Last modified 2yr ago