Animation CSS

**USE ONLY ONE ANIMATION AT ALL TIMES**

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); }
}
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);}
}
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);}
}
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;
}
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us