Ir al contenido principal
Añadiendo animación a tu oferta con CSS
Lasandra Miller avatar
Escrito por Lasandra Miller
Actualizado hace más de un mes

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);

}

}

¿Ha quedado contestada tu pregunta?