Overview

CSS animations let you play a sequence of style keyframes over time. Unlike a transition, which animates a single change from one value to another, an animation follows a timeline you define. It can run through multiple steps, repeat, and even start on its own. If you've written @keyframes in CSS on the web, you already know the idea.

Your first animation

Let's make a box that gently pulses forever. We define a set of keyframes that describe how the box looks at each step, then tell Reanimated how long one cycle should last.

Loading...

The heart of the animation is a keyframes object and a duration:

const pulse = {
  from: {
    transform: [{ scale: 0.8 }, { rotateZ: '-15deg' }],
  },
  to: {
    transform: [{ scale: 1.2 }, { rotateZ: '15deg' }],
  },
};

function App() {
  return (
    <Animated.View
      style={{
        animationName: pulse,
        animationDuration: '1s',
        animationIterationCount: 'infinite',
        animationTimingFunction: 'ease-in-out',
        animationDirection: 'alternate',
      }}
    />
  );
}

There's no button and no state here - the animation starts as soon as the component mounts, and it keeps going because animationIterationCount is set to 'infinite'.

How it works

You describe an animation in two parts:

1. Keyframes - animationName takes an object that maps offsets (from, to, or percentages like 50%) to the styles at that point in the timeline.
2. Timing - properties like animationDuration, animationIterationCount, and animationDirection control how that timeline plays.

Reanimated interpolates between your keyframes and plays them back on the timeline you set.

Passing an object to a prop called animationName might look surprising at first. The name comes from CSS on the web, where you declare keyframes under a named @keyframes rule and then reference that name from the animation-name property. React Native has no global stylesheet to hold named rules, so instead of a name you pass the keyframes object directly to animationName.

Not every style property can be animated. See Supported style properties for the full list and where each one works.

info

You can define keyframes inline, or pull them out into a separate variable and reuse the same animation across several components. See animationName for all the ways to define keyframes.

This is the main difference from a CSS transition: a transition animates a single change from A to B when a value changes, while an animation follows a defined, repeatable timeline.

When should I use CSS animations?

Use CSS animations for self-contained, declarative motion: loading spinners, pulsing badges, looping attention-grabbers, or any multi-step animation that plays on its own. Like transitions, this is the recommended starting point for most animations.

When you need frame-by-frame control (gesture-driven or scroll-driven motion, or animations orchestrated from live values), reach for the shared values API with useAnimatedStyle.

Summary

• A CSS animation plays a sequence of keyframes over a timeline you define.
• Describe the steps with animationName and control playback with properties like animationDuration and animationIterationCount.
• Animations can loop and start on mount, unlike transitions, which run once per change.
• Use CSS animations for declarative, self-running motion, and useAnimatedStyle for interactive, value-driven animations.

What's next?

Explore the properties that shape your animations:

• animationName
• animationDuration
• animationTimingFunction
• animationDelay
• animationIterationCount
• animationDirection
• animationFillMode
• animationPlayState

Animating something in response to a state change instead? See CSS Transitions.