Vibrate

@keyframes vibrate-1 {
    0% {
      transform: translate(0);
    }
    20% {
      transform: translate(-2px, 2px);
    }
    40% {
      transform: translate(-2px, -2px);
    }
    60% {
      transform: translate(2px, 2px);
    }
    80% {
      transform: translate(2px, -2px);
    }
    100% {
      transform: translate(0);
    }
  }
  .vibrate-1 {
    animation: vibrate-1 0.3s linear infinite both;
  }

Shake

   
  .shake {
    animation: shake 1s infinite;
}

@keyframes shake {
    0%  { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

Pulse


.pulse {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

Bounce


.bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

Heartbeat


.heartbeat {
  animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1); }
  75% { transform: scale(0.7); }
  100% { transform: scale(1); }
}

Slide

.slide {
  animation: slide 1s infinite;
}

@keyframes slide {
  0%, 100% {transform: translateX(0);}
  50% {transform: translateX(20px);}
}

Flicker

.flicker {
  animation: flicker 1s infinite;
}

@keyframes flicker {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0.5;}
}

Rotate

.rotate {
  animation: rotate 1s infinite;
}

@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

Wobble

.wobble {
  animation: wobble 1s infinite;
}

@keyframes wobble {
  0%, 100% {transform: translateX(0) rotate(0deg);}
  15% {transform: translateX(-30px) rotate(-5deg);}
  30% {transform: translateX(15px) rotate(3deg);}
  45% {transform: translateX(-15px) rotate(-3deg);}
  60% {transform: translateX(9px) rotate(2deg);}
  75% {transform: translateX(-6px) rotate(-1deg);}
}

Float

.float{
  transition: .5s, color .10s;
  -webkit-transition: .5s, color .10s;
  -moz-transition: .5s, color .10s;
}
.float:hover{
  box-shadow: 0 8px 8px 0 #000000,0 8px 8px 0 #000000;
  transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
  -moz-transform:translate(0px,5px);
}

Rotate-180

.rotate-180{
  transition: .5s, color .10s;
      -webkit-transition: .5s, color .10s;
      -moz-transition: .5s, color .10s;
}
.rotate-180:hover{
  transform: rotateZ(180deg);
      -webkit-transform: rotateZ(180deg);
      -moz-transform: rotateZ(180deg);
}

Rotate-360


              
  .rotate-360{
      transition: .5s, color .10s;
          -webkit-transition: .5s, color .10s;
          -moz-transition: .5s, color .10s;
  }
  .rotate-360:hover{
      transform: rotateZ(360deg);
          -webkit-transform: rotateZ(360deg);
          -moz-transform: rotateZ(360deg);
  }

Flex


  .flex{
      transition: .5s, color .10s;
          -webkit-transition: .5s, color .10s;
          -moz-transition: .5s, color .10s;
  }
  .flex:hover{
      transform: matrix(3.0, .5, 0, 1.0, 1.0, 1.0);
          -webkit-transform: matrix(3.0, .5, 0, 1.0, 1.0, 1.0);
          -moz-transform: matrix(3.0, .5, 0, 1.0, 1.0, 1.0);
  }

transLeft

.transLeft{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.transLeft:hover{
    transform: translatex(-20px);
        -webkit-transform: translatex(-20px);
        -moz-transform: translatex(-20px);
}

transRight

.transUp{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.transUp:hover{
    transform: translatey(-20px);
        -webkit-transform: translatey(-20px);
        -moz-transform: translatey(-20px);
}

transUp

.transDown{
  transition: .5s, color .10s;
      -webkit-transition: .5s, color .10s;
      -moz-transition: .5s, color .10s;    
}
.transDown:hover{
  transform: translatey(20px);
      -webkit-transform: translatey(20px);
      -moz-transform: translatey(20px);
}

transDown

.toStretch{
  transition: .5s, color .10s;
      -webkit-transition: .5s, color .10s;
      -moz-transition: .5s, color .10s;
}
.toStretch:hover{
  transform: scale(2, 0.5);
      -webkit-transform: scale(1.2, 0.5);
      -moz-transform: scale(1.2, 0.5);
}

toStretch

.skew{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.skew:hover{
    transform: skew(30deg, 20deg);
        -webkit-transform: skew(30deg, 20deg);
        -moz-transform: skew(30deg, 20deg);
}

Skew

.skewX{
  transition: .5s, color .10s;
      -webkit-transition: .5s, color .10s;
      -moz-transition: .5s, color .10s;
}
.skewX:hover{
  transform: skewX(30deg);
      -webkit-transform: skewX(30deg);
      -moz-transform: skewX(30deg);
}

SkewX

.skewY{
  transition: .5s, color .10s;
      -webkit-transition: .5s, color .10s;
      -moz-transition: .5s, color .10s;
}
.skewY:hover{
  transform: skewY(1.07rad);
      -webkit-transform: skewY(15deg);
      -moz-transform: skewY(15deg);
}

SkewY


.float-fluid{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.float-fluid:hover{
    transform: translate3d(12px, 50%, 3em);
        -webkit-transform: translate3d(12px, 50%, 3em);
        -moz-transform: translate3d(12px, 50%, 3em);
    box-shadow: 0 8px 8px 0 #000000,0 8px 8px 0 #000000;
}

Float-fluid

.grow{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.grow:hover{
    transform: scale3d(1.5, 1.5, 0.3);
        -webkit-transform: scale3d(1.5, 1.5, 0.3);
        -moz-transform: scale3d(1.5, 1.5, 0.3);
}

Grow

.flipUp-360{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.flipUp-360:hover{
    transform: rotateX(360deg);
        -webkit-transform: rotateX(360deg);
        -moz-transform: rotateX(360deg);
}

FlipUp-360

.flipUp-180{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.flipUp-180:hover{
    transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
}

FlipUp-180

.flipSide-180{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.flipSide-180:hover{
    transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
}

FlipSide-180

.flipSide-360{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.flipSide-360:hover{
    transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
}

FlipSide-360

.shake:hover {
    animation: shake 1s infinite;
  }
  
  @keyframes shake {
    0%, 100% { transform: translate(1px, -2px) rotate(-1deg); }
    10%, 90% { transform: translate(-1px, -2px) rotate(-1deg); }
    20%, 80% { transform: translate(-3px, 0px) rotate(1deg); }
    30%, 70% { transform: translate(3px, 2px) rotate(0deg); }
    40%, 60% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
  }

Shake

.bounceShakeX:hover {
  animation: bounce-shakeX 1s;
}

@keyframes bounce-shakeX {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(50%); }
  24% { transform: translateX(-20%); }
  36% { transform: translateX(20%); }
  48% { transform: translateX(-10%); }
  60% { transform: translateX(10%); }
  72% { transform: translateX(-5%); }
  84% { transform: translateX(5%); }
  96% { transform: translateX(0); }
}

BounceShakeX

.bounceShakeY:hover {
    animation: bounce-shakeY 1s;
  }
  
  @keyframes bounce-shakeY {
    0%, 100% { transform: translateY(0); }
    12% { transform: translateY(50%); }
    24% { transform: translateY(-20%); }
    36% { transform: translateY(20%); }
    48% { transform: translateY(-10%); }
    60% { transform: translateY(10%); }
    72% { transform: translateY(-5%); }
    84% { transform: translateY(5%); }
    96% { transform: translateY(0); }
  }

BounceShakeY

.surprise:hover {
  animation: surprise 0.8s;
}

@keyframes surprise {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(7deg) scale(2); }
  20%, 40%, 60%, 80% { transform: rotate(-7deg) scale(2); }
}

Explora más herramientas útiles

Reflexiones y Creaciones en "El Escritorio"

Visita mi espacio personal, donde comparto reflexiones, investigaciones, teorías y novedades.

Leer Ahora

Generador de Voz con IA

Convierte texto en audio de alta calidad con nuestro generador de voz impulsado por inteligencia artificial.

Probar Generador

Calculadora de Interés Compuesto

Utiliza nuestra calculadora de interés compuesto para planificar tu futuro financiero y maximizar tus ahorros.

Calcular Ahora