# Flow-Animationstransitionen

Mit der Flow-Animations-Transition können Sie konfigurieren, wie die Fragen von einer zur anderen übergehen sollen. Da ngSurvey für seine Transitionen einfache CSS-Animationsfunktionen verwendet, können Sie diese sehr leicht erweitern, um eigene Animationen zu integrieren,

Im Folgenden finden Sie Beispiele der standardmäßigen Übergangsanimationen, die in ngSurvey integriert sind. Um festzulegen, welche Animationen für Ihre Transitionen verwendet werden sollen, müssen Sie die Questions transition CSS-Eigenschaft in Ihrem festlegen [Umfrageeigenschaften](/de/form-management/form-designer/form-settings.md).

{% hint style="info" %}
Um neu erstellte CSS-Transitions zu speichern und in Ihrer Umfrage verwenden zu können, müssen Sie diese zu Ihrem hinzufügen [Theme-Style-CSS](/de/form-management/style-branding/style-editor/css.md#adding-css). 
{% endhint %}

## 🏃 Wie funktioniert es?

Um Transitionen zu handhaben, fügt ngSurvey je nach aktueller Anzeigeordnung die folgenden CSS-Klassen zu den Fragen Ihrer Umfrage hinzu. Sobald der Befragte zur nächsten oder vorherigen Frage wechselt, ändert ngSurvey die CSS-Klasse und löst die CSS-Transition zwischen den Klassen aus.  

Das **ngs-survey\_\_flow-section--visible** CSS-Klasse wird auf die aktuell sichtbare Frage angewendet, die vorherige Frage erhält ihre CSS-Klasse gesetzt auf **ngs-survey\_\_flow-section--previous** und die nächste Frage erhält ihre CSS-Klasse gesetzt auf **ngs-survey\_\_flow-section--next**. 

## ⌛ CSS-Transitions

Standardmäßig setzt ngSurvey die folgenden CSS-Transition-Eigenschaften beim Wechseln der CSS-Klassen. Wenn Sie das Timing ändern oder zusätzliche Transition-Eigenschaften für eigene Animationen hinzufügen möchten, können Sie die CSS-Klasse unten anpassen und zu Ihrem hinzufügen [Theme-Style-CSS](/de/form-management/style-branding/style-editor/css.md#adding-css). 

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

## 🖼️ Vertikale (oben nach unten) Transition

Um diese Transition zu verwenden, würden Sie die Question CSS-Eigenschaft auf: vertical setzen

```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
}
```

## 🖼️ Horizontale (links nach rechts) Transition

Um diese Transition zu verwenden, würden Sie die Question CSS-Eigenschaft auf: horizontal setzen

```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
}
```

##  🖼️ Ein-/Ausblenden (Fade in/out) Transition

Um diese Transition zu verwenden, würden Sie die Question CSS-Eigenschaft auf: fadein setzen

```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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.