# Animations

Superform's built-in animation system features CSS animations for both advancing and reversing through form steps. This dual-direction capability ensures smooth, consistent transitions throughout your form.

***

## Customization Options

* **Step Animations**:

  * **Attribute**: `sf-step-animation`
  * **Values**: `fade`, `slide-top`, `slide-bottom`, `slide-left`, `slide-right`, `none`
  * **Description**: Controls the transition style between form steps.

  → See more details: [step-animation](https://deltaclan.gitbook.io/superform/global-options/animations/step-animation "mention")

* **Animation Duration**:

  * **Attribute**: `sf-step-animation-duration`
  * **Values**: Time in milliseconds (e.g., `300`)
  * **Description**: Sets the duration for step transitions.

  → See more details: [step-animation-duration](https://deltaclan.gitbook.io/superform/global-options/animations/step-animation-duration "mention")

* **Animation Ease**:

  * **Attribute**: `sf-step-animation-ease`
  * **Values**: `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, or custom `cubic-bezier` values
  * **Description**: Defines the easing function for animations.

  → See more details: [step-animation-ease](https://deltaclan.gitbook.io/superform/global-options/animations/step-animation-ease "mention")

{% hint style="info" %}
**Pro Tips**

* **Syncing Animations**: Use CSS transitions to synchronize (other) animations with form step transitions. This creates a cohesive visual experience.

* **Custom Easing**: Experiment with custom cubic-bezier values for unique easing effects. These can be fine-tuned to match your design aesthetics.

* **Preset Animations**: Take advantage of preset animations that include reverse animations for a seamless backward navigation experience.

{% endhint %}