> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/common-controls/transitions.md).

# Transitions

Control which properties animate and set their timing

Transitions control how quickly a component moves between states created by Backgrounds, Borders, Effects, Filters, Transforms, and other hover-aware controls.

{% embed url="<https://youtu.be/tg2k4ZcFeQg>" %}

### Apply to

**Apply to** defaults to All.

| Option      | Animated properties                                                                                                                     |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| None        | Disables transitions.                                                                                                                   |
| All         | Animates every property that supports CSS transitions.                                                                                  |
| Most Common | Animates colour, background, border colour, text decoration, fill, stroke, opacity, shadows, transforms, filters, and backdrop filters. |
| Colors      | Animates colour-related properties only.                                                                                                |
| Opacity     | Animates opacity only.                                                                                                                  |
| Shadows     | Animates box and text shadows only.                                                                                                     |
| Transforms  | Animates transform properties only.                                                                                                     |

Use Most Common when All causes an unrelated layout property to animate.

### Function

**Function** controls the timing curve and defaults to Ease-in-out.

* **Custom** — Reveals a Cubic Bezier field.
* **Linear** — Moves at a constant rate.
* **Ease-in** — Starts slowly and accelerates.
* **Ease-out** — Starts quickly and decelerates.
* **Ease-in-out** — Starts and ends slowly.

#### Custom Timing Functions

The **Cubic Bezier** field accepts four comma-separated values: `x1,y1,x2,y2`. It defaults to:

```
0.95,0.05,0.795,0.035
```

The x values must remain between 0 and 1. The y values may extend below 0 or above 1 to create anticipation or overshoot.

This second example overshoots before settling:

```
0.21,1,1,1.53
```

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FpIoYUvpnSo1zPDnZJqPd%2FCleanShot%202024-10-17%20at%2010%E2%80%AF.31.23.gif?alt=media&amp;token=f97b2305-9425-4e6d-ba2d-3b163632b538" alt="A fast custom cubic-bezier transition"><figcaption><p>The default custom curve starts quickly and ends abruptly.</p></figcaption></figure>

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FD0EtGsGAWvzbmSpeyOHZ%2FCleanShot%202024-10-17%20at%2010%E2%80%AF.28.15.gif?alt=media&amp;token=cc2febf6-ecbf-48fc-af25-a92fb5410dc7" alt="A custom cubic-bezier transition that overshoots"><figcaption><p>Values above 1 on the y-axis can create overshoot.</p></figcaption></figure>

Use [Cubic-Bezier.com](https://cubic-bezier.com) to experiment visually.

### Timing

**Duration** is measured in milliseconds and defaults to 300. For example:

* `150` feels quick and responsive.
* `300` is the default general-purpose transition.
* `1000` lasts one second.

**Delay** is measured in milliseconds and defaults to 0.

Function, Duration, and Delay are hidden when Apply to is None.

{% hint style="info" %}
Configure the Start and End states first, then adjust the transition. A transition cannot create a visual change when both states use the same values.
{% endhint %}

## Transitions UI in Elements

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FfiLlfcut4QsD6iPj7H4i%2FCleanShot%202024-10-17%20at%209%E2%80%AF.52.22%402x.png?alt=media&amp;token=7ad48f37-57d0-43c5-9fde-63bf55c780c9" alt="Transition controls for property, function, duration, and delay"><figcaption><p>Transition controls determine what animates and how long the change takes.</p></figcaption></figure>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/components/common-controls/transitions.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.