Animaciones de imágenes con Elementor free

Animaciones de imágenes con Elementor free

Deja un comentario / Por Byteweb / 28 diciembre, 2021

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.

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