Zum Hauptinhalt springen
Alle KollektionenHilfeartikel zur neuen BenutzeroberflächeErste Schritte
Hinzufügen von Animationen zu deinem Angebot mit CSS
Hinzufügen von Animationen zu deinem Angebot mit CSS

CSS-Animationen

Lasandra Miller avatar
Verfasst von Lasandra Miller
Vor über 3 Monaten aktualisiert

CSS-Animationen sind ein wertvolles Werkzeug zur Verbesserung deines Angebots-Widgets, indem sie Bewegung und Interaktivität hinzufügen. Sie ziehen effektiv die Aufmerksamkeit auf sich und lenken den Fokus auf deine Angebote. Durch die Integration von CSS-Animationen kannst du eine ansprechendere und visuell stimulierende Erfahrung für die Benutzer schaffen. Es kann immer nur eine Animation gleichzeitig verwendet werden.

Wie fügt man CSS-Animationen zu Angeboten hinzu?


Um den CSS-Animationscode in den Abschnitt „Custom CSS“ der App im Advanced-Tab einzufügen, befolge diese Schritte:

  1. Kopiere den gewünschten CSS-Animationscode aus der bereitgestellten Liste.

  2. Öffne die App und navigiere zum Advanced-Tab.

  3. Finde den Abschnitt „Custom CSS“.

  4. Füge den kopierten Code in den Abschnitt „Custom CSS“ ein.

Unten ist eine Liste von CSS-Animationscodes, jeweils begleitet von einer Video-Demonstration, um ihr Verhalten zu zeigen.

Shake

.nudge-offer{

animation: nudge-offer 1s ease;
}
@keyframes nudge-offer{
30% { transform: scale(1.2); }
40%, 60% { transform: rotate(-20deg) scale(1.2); }
50% { transform: rotate(20deg) scale(1.2); }
70% { transform: rotate(0deg) scale(1.2); }
100% { transform: scale(1); }
}

Shake (left to right)

.nudge-offer{
animation: shake 1s ease;
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}

Gelatine

.nudge-offer{
animation: gelatine 0.5s;
}
@keyframes gelatine {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}

Pulse

.nudge-offer{
animation: pulse .8s ease alternate;
}
@keyframes pulse {
from { transform: scale(0.8); }
to { transform: scale(1.2); }
}

Grow

.nudge-offer{
animation: grow 1s ease;
}
@keyframes grow {
from { transform: scale(0); }
to { transform: scale(1); }
}

Bounce

.nudge-offer{
animation: bounce 2s ease;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}

Flip

.nudge-offer{
backface-visibility: visible !important;
animation: flip 2s ease;
}
@keyframes flip {
0% {
transform: perspective(1000px) rotateY(0);
animation-timing-function: ease-out;
}
40% {
transform: perspective(1000px) translateZ(50px) rotateY(170deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(1000px) translateZ(50px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(1000px) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(1000px) scale(1);
animation-timing-function: ease-in;
}
}

Fade-in

.nudge-offer {

animation: fadeIn 1s ease-in forwards;

}

@keyframes fadeIn {

from {opacity: 0;

}

to {opacity: 1;

}

}

Slide-in-left

.nudge-offer {

animation: slideInLeft 1s ease-in forwards;

}@keyframes slideInLeft {

from {

transform: translateX(-100%);

}

to {

transform: translateX(0);

}

}

Hat dies deine Frage beantwortet?