# Animated Transitions
You can create complex animated transitions between two elements within a common container by using the [`replace` effect](https://demos.telerik.com/kendo-ui/fx/replace).
> Unlike the other available effects, `replace` relies on CSS classes to define the transition states of the two elements. The effect works only in [browsers which support transitions](https://caniuse.com/css-transitions).
## Getting Started
The `replace` configuration works in the following way:
1. The effect assigns several CSS classes to a common container based on the effect configuration. For example, if the effect is configured as `kendo.fx("#step1").replace("#step2", "swap").direction("up")`, the assigned classes are `k-fx` (always assigned), `k-fx-swap` (the transition class), and `k-fx-up`. If the effect is to be played in reverse, assign an additional `k-fx-reverse` class.
2. The effect element receives the `k-fx-next` CSS class.
3. The element which is going to be hidden receives the `k-fx-current` CSS class.
4. The container gets the `k-fx-start` CSS class, which is then replaced by `k-fx-end`.
5. In `kendo.common.css` and `kendo.mobile.all.css`, the `.k-fx .k-fx-current` and `.k-fx .k-fx-next` CSS selectors have their transition CSS property set to `all 350ms ease-out`. As a result, both elements transition their state from the one defined in the `.k-fx-swap.k.fx-start` to the one defined in `.k-fx-swap.k-fx-end`.
The following example demonstrates how to apply the Kendo UI `replace` effect.
```
Questionairre – Step 1
Questionairre – Step 2
```
## Customizing the Transition Duration
The duration of the animated transition is configured through the CSS selectors which are present in `kendo.common.css`.
```
.k-fx-end .k-fx-next,
.k-fx-end .k-fx-current {
-webkit-transition:all 350ms ease-out;
-moz-transition:all 350ms ease-out;
-ms-transition:all 350ms ease-out;
-o-transition:all 350ms ease-out;
transition:all 350ms ease-out;
}
```
You can override the default duration for the entire document by using a [higher specificity selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) or by including the same selector after Kendo UI stylesheet references.
The following example demonstrates how to apply a faster `replace` effect transition.
> You can use this technique to customize the Kendo UI Mobile view transitions.
```
```
## Animating Nested Elements
In addition to the two elements themselves, the contents of the elements can also perform additional transitions. You can use this approach to implement the complex iOS transition in the Kendo UI hybrid widgets. The cross-browser definitions are omitted from the source.
The following example demonstrates the Kendo UI multi-element iOS transition.
```
.k-fx-slide.k-fx-end .k-fx-next .km-content,
.k-fx-slide.k-fx-end .k-fx-next .km-header,
.k-fx-slide.k-fx-end .k-fx-next .km-footer,
.k-fx-slide.k-fx-end .k-fx-current .km-content,
.k-fx-slide.k-fx-end .k-fx-current .km-header,
.k-fx-slide.k-fx-end .k-fx-current .km-footer {
transition: all 350ms ease-out;
}
.k-fx-slide.k-fx-start .k-fx-next .km-content {
transform: translatex(100%);
}
.k-fx-slide.k-fx-start .k-fx-next .km-header,
.k-fx-slide.k-fx-start .k-fx-next .km-footer {
opacity: 0;
}
.k-fx-slide.k-fx-end .k-fx-current .km-content {
transform: translatex(-100%);
}
.k-fx-slide.k-fx-end .k-fx-next .km-header,
.k-fx-slide.k-fx-end .k-fx-next .km-footer {
opacity: 1;
}
/* A reverse transition. */
.k-fx-slide.k-fx-reverse.k-fx-start .k-fx-current .km-content {
transform: translatex(0);
}
.k-fx-slide.k-fx-reverse.k-fx-end .k-fx-current .km-content {
transform: translatex(100%);
}
.k-fx-slide.k-fx-reverse.k-fx-start .k-fx-next .km-content {
transform: translatex(-100%);
}
.k-fx-slide.k-fx-reverse.k-fx-end .k-fx-next .km-content {
transform: translatex(0);
}
.k-fx-slide.k-fx-reverse.k-fx-start .k-fx-current .km-header,
.k-fx-slide.k-fx-reverse.k-fx-start .k-fx-current .km-footer {
opacity: 1;
}
.k-fx-slide.k-fx-reverse.k-fx-end .k-fx-current .km-header,
.k-fx-slide.k-fx-reverse.k-fx-end .k-fx-current .km-footer {
opacity: 0;
}
```
## See Also
* [Basic Usage of FX (Demo)](https://demos.telerik.com/kendo-ui/fx/expand)
* [JavaScript API Reference of FX](https://www.telerik.com/kendo-jquery-ui/documentation/api/effects/common)