5 animaciones para imagenes con Elementor

Animaciones de imágenes con Elementor free

Facebook
LinkedIn
WhatsApp
Twitter

En esta entrada os explicaremos cómo crear animaciones de imágenes que no viene de forma nativa en Elementor. Todas las animaciones las crearemos con CSS, por lo que si no tienes Elementor pro puedes editar los atributos de las clases CSS en apariencia/personalizar/ CSS adicional.

Al final del post explicaremos cómo ejecutar estas animaciones en un punto en concreto del scroll.

Índice de contenidos

Animación 1

				
					
.scale-in-ver-bottom{
-webkit-animation:scale-in-ver-bottom 2s cubic-bezier(.25,.46,.45,.94) 2s both;
animation:scale-in-ver-bottom 2s cubic-bezier(.25,.46,.45,.94) 2s both
}

@-webkit-keyframes scale-in-ver-bottom{
0%{-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:0 100%;transform-origin:0 100%;opacity:0!important}
100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 100%;transform-origin:0 100%;opacity:1}}
@keyframes scale-in-ver-bottom{0%{-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:0 100%;transform-origin:0 100%;opacity:1}
100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 100%;transform-origin:0 100%;opacity:1}}
				
			

Animación 2

				
					.roll-in-left {
	-webkit-animation: roll-in-left 2s ease-out 2s both;
	        animation: roll-in-left 2s ease-out 2s both;
}
@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
				
			

Animación 3

				
					.slide-rotate-hor-top {
	-webkit-animation: slide-rotate-hor-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s reverse both;
	        animation: slide-rotate-hor-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s reverse both;
}

@-webkit-keyframes slide-rotate-hor-top {
  0% {
      opacity:1;
    -webkit-transform: translateY(0) rotateX(0deg);
            transform: translateY(0) rotateX(0deg);
  }
  100% {
      opacity:0;
    -webkit-transform: translateY(-150px) rotateX(-90deg);
            transform: translateY(-150px) rotateX(-90deg);
  }
}
				
			

Animación 4

				
					.slit-out-vertical {
	-webkit-animation: slit-out-vertical 2s ease-in 2s reverse both;
	        animation: slit-out-vertical 2s ease-in 2s reverse both;
}
@-webkit-keyframes slit-out-vertical {
  0% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes slit-out-vertical {
  0% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
}
				
			

Animación 5

				
					.slide-out-elliptic-top-bck {
	-webkit-animation: slide-out-elliptic-top-bck 2s ease-in 2s reverse both;
	        animation: slide-out-elliptic-top-bck 2s ease-in 2s reverse both;
}
@-webkit-keyframes slide-out-elliptic-top-bck {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 1;
  }
}
@keyframes slide-out-elliptic-top-bck {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 1;
  }
}
				
			

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor? Dejalo en comentarios, prometemos responderte.

Compártenos en tu red social favorita
Facebook
LinkedIn
WhatsApp
Twitter

Deja un comentario

Tu dirección de correo electrónico no será publicada.

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba