Animation startet nicht – ZenBlocks buttonBasic

Animation startet nicht – ZenBlocks buttonBasic

Fazit

Wenn eine Animation nicht laeuft, ist meist **ein noetiges Element nicht gesetzt, der falsche Animationstyp geprueft oder nur im Editor getestet**. Identifizieren Sie zuerst den Typ.

Ursachen

`buttonBasic` hat 4 Animationstypen mit unterschiedlichen Bedingungen.

| Animationstyp | Ausloesung | Voraussetzung |
|—|—|—|
| Text-Animation | Nur bei Hover | Text ist gesetzt |
| Icon-Animation | Nur bei Hover | Icon ist gesetzt |
| Frame-Animation | Dauerhaft | Icon-Frame ist gesetzt |
| Knopf-Animation | Nur bei Hover | Keine |

Haeufige Ursachen:
1. **Voraussetzung fehlt** (z. B. kein Icon oder kein Frame).
2. **Nur im Editor geprueft** statt im Frontend.
3. **Voreinstellung steht auf `none`**.

Loesung

### Schritt 1: Animationstyp pruefen

1. Typ bestimmen (Text / Icon / Frame / Knopf).
2. Das passende Einstellungs-Panel oeffnen.
3. Sicherstellen, dass das Voreinstellung nicht `none` ist.

### Schritt 2: Voraussetzungen pruefen

– **Text-Animation**: Haupttext ist gesetzt.
– **Icon-Animation**: Icon ist ausgewaehlt.
– **Frame-Animation**: Icon-Frame ist aktiv.
– **Knopf-Animation**: keine spezielle Voraussetzung.

### Schritt 3: Im Frontend testen

1. Echte Frontend-Seite oeffnen.
2. Hover-Typen per Maus testen.
3. Frame-Animation direkt nach Seitenladen pruefen.

### Schritt 4: Übergang-Werte pruefen

1. Übergang-Panel oeffnen.
2. `Duration` darf nicht zu kurz sein.
3. `Delay` darf nicht unnoetig lang sein.

Hinweise

– **30-Zeichen-Limit bei Text-Animation**: Zeichenweise Verzoegerung gilt bis 30 Zeichen.
– `neon-01` und `glow-01` koennen wegen `box-shadow` ueber den Knopf hinaus sichtbar sein.
– Bei aktiver Icon-Animation steuert dieses Modul die Sichtbarkeit des Icons.

Verwandte Einstellungen

– [Textanimationseinstellungen](../text-animation/)
– [Symbolanimationseinstellungen](../icon-animation/)
– [Rahmenanimationseinstellungen](../frame-animation/)
– [Knopf-Animationseinstellungen](../button-animation/)
– [Symboleinstellungen](../icon/)

Related FAQ