Las animaciones CSS son una herramienta valiosa para mejorar tu widget de ofertas al agregar movimiento e interactividad. Capturan eficazmente la atención y dirigen el enfoque hacia tus ofertas. Al incorporar animaciones CSS, puedes crear una experiencia más atractiva y visualmente estimulante para los usuarios. Solo se puede usar una animación a la vez.
¿Cómo añadir animación CSS a las ofertas?
Para insertar el código de animación CSS en la sección de CSS personalizado de la aplicación en la pestaña Avanzada, sigue estos pasos:
1. Copia el código de animación CSS deseado de la lista proporcionada.
2. Abre la aplicación y navega a la pestaña Avanzada.
3. Localiza la sección de CSS personalizado.
4. Pega el código copiado en la sección de CSS personalizado.
A continuación se muestra una lista de códigos de animaciones CSS, cada uno acompañado de un video que representa su comportamiento.
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);
}
}