> For the complete documentation index, see [llms.txt](https://baconbrix.gitbook.io/react-native-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://baconbrix.gitbook.io/react-native-web/styling/transitions.md).

# Transitions

## What can it do?

CSS Transitions enable us to create implicit transitions similar to techniques like "magic move". You can define how you want the transition to take place and the final position, but the browser is responsible for interpolating the values.

## The API

### transitionDelay

The duration or durations an animation will wait before starting or proceeding to interpolate to the next value.

#### **Type:** `string | string[]`

```
transitionDelay: "200ms"
transitionDelay: ["1s", "300ms"]
```

### transitionDuration

Durations of the transitions after the delay has finished. Durations are strings that can be prefixed with either "s" for seconds or "ms" for milliseconds.

#### **Type:** `string | string[]`

**Default:** `"0s"`

```
transitionDuration: "200ms"
transitionDuration: ["1s", "300ms"]
```

### transitionProperty

Define the name or names of the properties that should be controlled by the transition effect. The transition will begin whenever one of the specified properties change.

#### **Type:** `string | string[]`

**Values:** `"none" | "all" | property`

**Default:** `"all"`

```
transitionProperty: "all"
transitionProperty: ["width", "height"]
```

### transitionTimingFunction

This value denotes the speed curve of the transition effect. Learn more about [CSS Transition Timing Functions](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp).

#### **Type:** `string | string[]`

**Values:** `"linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "step-start" | "step-end" | "steps(int,start|end)" | "cubic-bezier(n,n,n,n)"`

```
transitionTimingFunction: "linear"
transitionTimingFunction: ["ease", "ease-out"]
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://baconbrix.gitbook.io/react-native-web/styling/transitions.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.