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:
Kopiere den gewünschten CSS-Animationscode aus der bereitgestellten Liste.
Öffne die App und navigiere zum Advanced-Tab.
Finde den Abschnitt „Custom CSS“.
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);
}
}