---
title: Animations
description: UI Animations.
---

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import Link from '@slint/common-files/src/components/Link.astro';

Declare animations for properties with the `animate` keyword like this:

```slint
export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;

    background: area.pressed ? blue : red;
    animate background {
        duration: 250ms;
    }

    area := TouchArea {}
}
```

This will animate the color property for 250ms whenever it changes.

It's also possible to animate several properties with the same animation, so:

```slint no-test
animate x, y { duration: 100ms; easing: ease-out-bounce; }
```

is the same as:

```slint no-test
animate x { duration: 100ms; easing: ease-out-bounce; }
animate y { duration: 100ms; easing: ease-out-bounce; }
```


Fine-tune animations using the following parameters:

### delay
<SlintProperty propName="delay" typeName="duration">
The amount of time to wait before starting the animation.
</SlintProperty>

### duration

<SlintProperty propName="duration" typeName="duration">
 The amount of time it takes for the animation to complete.
</SlintProperty>

### iteration-count

<SlintProperty propName="iteration-count" typeName="float">
The number of times an animation should run. A negative value specifies
infinite reruns. Fractional values are possible.
For permanently running animations, see <Link type="AnimationTick" label="`animation-tick()`" />.
</SlintProperty>

### easing

<SlintProperty propName="easing" typeName="easing">
Can be any of the following. See [`easings.net`](https://easings.net/) for a visual reference:
</SlintProperty>

### direction
<SlintProperty propName="direction" typeName="enum" enumName="AnimationDirection">
Use this to set or change the direction of the animation.
</SlintProperty>

