Expo Web
Search…
Expo Web
Awesome Web!
Intro
FAQ
Anti-Pitch
Primitives
Intro to Primitives
View
TextInput
Styling
Animations
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationKeyframes
animationPlayState
animationTimingFunction
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationKeyframes
animationPlayState
animationTimingFunction
Aspect Ratio
Grids
Interactions
Text
Transforms
Transitions
View
Powered By GitBook
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[]

Default: '0s'

Conversion

// CSS
- animation-delay: 650ms;
​
// React Native
+ animationDelay: "650ms",
The direction value dictates if an animation should be played forwards, backwards or in alternate cycles.

Type: string | string[]

Default: 'normal'

Values: 'alternate' | 'alternate-reverse' | 'normal' | 'reverse'

Conversion

// CSS
- animation-direction: alternate-reverse;
​
// React Native
+ animationDirection: "alternate-reverse",
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[]

Default: '0s'

Conversion

// CSS
- animation-duration: 10s;
​
// React Native
+ animationDuration: "10s",
The animationFillMode CSS property sets how a CSS animation applies styles to its target before and after its execution.

Type: string | string[]

Default: 'forwards'

Values: 'none' | 'forwards' | 'backwards' | 'both'

Conversion

// CSS
- animation-fill-mode: none;
​
// React Native
+ animationFillMode: "none",
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'>

Default: 1

Values: <number> | 'infinite'

Conversion

// CSS
- animation-iteration-count: 2;
​
// React Native
+ animationIterationCount: 2,
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>

Conversion

// CSS
​
- @keyframes demo {
- 0% { backgroundColor: "blue"; }
- 100% { backgroundColor: "red"; }
- }
​
- animation-name: demo;
​
// React Native
​
+ const demo = {
+ '0%': { backgroundColor: "blue" },
+ '100%': { backgroundColor: "red" },
+ }
​
+ animationKeyframes: demo,
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[]

Default: 'running'

Values: 'paused' | 'running'

Conversion

// CSS
- animation-play-state: running;
​
// React Native
+ animationPlayState: "running",
The animationTimingFunction CSS property sets how an animation progresses through the duration of each cycle.

Type: string | string[]

Default: '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

// CSS
- animation-timing-function: ease-in;
​
// React Native
+ animationTimingFunction: "ease-in",
Primitives - Previous
TextInput
Next - Styling
Aspect Ratio
Last modified 2yr ago
Copy link
Outline
What can it do?
The API
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationKeyframes
animationPlayState
animationTimingFunction