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

# Transitions

Transforms are a bit rough. They need some smoothness. Let's animate them!

```css
.wt-demo-transform {
    border-style: solid;
    border-width: 1px;
    margin: auto;
    padding: 10px;
    width: 100px;

    transition: transform .5s;
}

.wt-demo-transform:hover {
    transform: perspective(100px) rotateY(405deg);
}
```

<https://codepen.io/younes-jaaidi/pen/qMxpxY>

{% embed url="<https://codepen.io/younes-jaaidi/pen/qMxpxY>" %}

The `transition` property takes 4 parameters:

1. The property we want to animate.
2. Transition duration.
3. Timing function *(ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier)*.
4. Delay to apply before starting the transition.

### Multiple transitions

It is possible to apply transitions on multiple properties with different parameters.

```css
.wt-demo-transition {
    border-style: solid;
    border-width: 1px;
    margin: auto;
    padding: 10px;

    height: 18px;
    width: 73px;

    transition: height 1s ease-in, width 1s ease-out 1s;
}

.wt-demo-transition:hover {
    height: 118px;
    width: 173px;
}
```

<https://codepen.io/younes-jaaidi/pen/aaqEKq>

{% embed url="<https://codepen.io/younes-jaaidi/pen/aaqEKq>" %}

{% hint style="success" %}
For better user experience, use short transitions *(less than 500ms)*.
{% endhint %}