CSS animations are a valuable tool for enhancing your offer widget by adding movement and interactivity. They effectively capture attention and draw focus towards your offers. By incorporating CSS animations, you can create a more engaging and visually stimulating experience for users. Only one animation can be used at a time.
How to add CSS animation to offers?
To insert the CSS animation code into the app's Custom CSS section on the Advanced tab, follow these steps:
Copy the desired CSS animation code from the provided list.
Open the app and navigate to the Advanced tab.
Locate the Custom CSS section.
Paste the copied code into the Custom CSS section.
Below is a list of CSS animations code, each accompanied by a video representation to demonstrate their behavior.
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);
}
}