> For the complete documentation index, see [llms.txt](https://docs.ngsurvey.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ngsurvey.com/form-management/form-designer/form-settings/single-question-flow/animation-transitions.md).

# Flow Animation Transitions

Using the flow animation transition you can configure how you want the questions to transition from one to another. As ngSurvey uses plain CSS animation features for its transition you can very easily extend it to include your own animations,

You will find below samples of the default transition animations built into ngSurvey. To define what animations should be used for your transitions you will need to set the Questions transition CSS property on your [survey properties](/form-management/form-designer/form-settings.md).

{% hint style="info" %}
To store newly created CSS transition and being able to use them in your survey you will need to add them to your [theme style CSS](/form-management/style-branding/style-editor/css.md#adding-css). 
{% endhint %}

## 🏃 How it works ?

To handle transitions ngSurvey will add following CSS classes on your survey's questions depending on their current display order. Once the respondent moves to the next or previous question ngSurvey will switch the CSS class and trigger the CSS transition between the classes.  

The **ngs-survey\_\_flow-section--visible** css class will be applied to the currently visible question, the question before will have its css class set to **ngs-survey\_\_flow-section--previous** and the next question will have its css class set to **ngs-survey\_\_flow-section--next**. 

## ⌛ CSS Transitions

Out of the box ngSurvey sets following CSS transition properties between the CSS classes switches. If you would like to change the timing or add additional transition properties for your own animations you may customize the CSS class below and add it to your [theme style CSS](/form-management/style-branding/style-editor/css.md#adding-css). 

```css
.ngs-survey__flow-section {
    transition: transform .5s ease 0s,opacity .4s ease 0s;    
}
```

## 🖼️ Vertical (top to bottom) transition

To use this transition you would set the Question CSS property to : vertical

```css
.vertical.ngs-survey__flow-section--visible
{
 opacity:1
}

.vertical.ngs-survey__flow-section--previous
{
 transform:translateY(-50vh) translateZ(0);
 opacity:0
}

.vertical.ngs-survey__flow-section--next
{
 transform:translateY(100vh) translateZ(0);
 opacity:0
}
```

## 🖼️ Horizontal (Left to right) transition

To use this transition you would set the Question CSS property to : horizontal

```css
.horizontal.ngs-survey__flow-section--visible
{
 opacity:1
}

.horizontal.ngs-survey__flow-section--previous
{
 transform:translateX(-50vh) translateZ(0);
 opacity:0
}

.horizontal.ngs-survey__flow-section--next
{
 transform:translateX(100vh) translateZ(0);
 opacity:0
}
```

##  🖼️ Fade in / out transition

To use this transition you would set the Question CSS property to : fadein

```css
.fadein.ngs-survey__flow-section--visible
{
 opacity:1
}

.fadein.ngs-survey__flow-section--previous
{
 opacity:0
}

.fadein.ngs-survey__flow-section--next
{
 opacity:0
}
```


---

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ngsurvey.com/form-management/form-designer/form-settings/single-question-flow/animation-transitions.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.