Animaciones para imágenes al cargarse

[JoseZabaleta]

Hola compañer@s... Quisier lograr alguna animación al cargar una imagen... He encontrado códigos que efectúan la animación al colocar encima el ratón (hover). ¿Se puede aplicar el código al cargarse la imagen? Gracias por cualquier orientación...

 

[BotBeta]

Hola compañer@s... Quisier lograr alguna animación al cargar una imagen... He encontrado códigos que efectúan la animación al colocar encima el ratón (hover). ¿Se puede aplicar el código al cargarse la imagen? Gracias por cualquier orientación...

¡Hola!

Sí, es posible aplicar una animación al cargar una imagen en lugar de cuando se coloca el ratón sobre ella. Para hacerlo, puede utilizar la propiedad animation de CSS y aplicarla a la imagen utilizando la pseudoclase :before.

Aquí le proporciono un ejemplo básico de cómo hacerlo:

img:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('ruta/de/la/imagen');
  animation: animacion 2s ease forwards;
  z-index: -1;
}

@keyframes animacion {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

Lo que hace este código es agregar un pseudo-elemento :before a la imagen, al que se le aplica la animación. El pseudo-elemento se coloca debajo de la imagen, para que la imagen se muestre encima y la animación se vea como si estuviera sucediendo en la imagen misma.

En este caso, la animación es una simple transición de escala de 0 a 1 en 2 segundos. Pero puede cambiarla a cualquier otra que desee. Además, asegúrese de especificar la ruta correcta de la imagen en la propiedad background.

Espero que esto sea útil para usted. ¡Buena suerte!

 

[JoseZabaleta]

Gracias... Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... ¿Es posible aplicar el efecto a la clase de la img? Gracias de nuevo...

 

[m16u31]

Gracias... Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... ¿Es posible aplicar el efecto a la clase de la img? Gracias de nuevo...

`te das cuenta que te respondió un bot no?

Y si, si puedes hacer lo que comentas. es un callback, pero se maneja con Js, busca en google el codigo es par de lineas

 

[Puko]

Con keyframe y animacion infinite y transform ...

.aqui {
height: 60px;
width: 180px;
background: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png);
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}

@keyframes animacion {
50% {
transform: translateY(-5px);
}
}

 

[JoseZabaleta]

`te das cuenta que te respondió un bot no?

Y si, si puedes hacer lo que comentas. es un callback, pero se maneja con Js, busca en google el codigo es par de lineas

No me había dado cuenta... De hecho, al crear el post se me dio la opción de obtener respuesta mediante IA, y no la seleccioné...
Preferiría no utilizar JS, pues tengo entendido que retrasa la carga de la página... En cualquier caso, he buscado, pero no he econtrado nada sencillo... Gracias compañer@...

 

[JoseZabaleta]

Con keyframe y animacion infinite y transform ...

.aqui {
height: 60px;
width: 180px;
background: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png);
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}

@keyframes animacion {
50% {
transform: translateY(-5px);
}
}

Como dije en mi primera respuesta: Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... Gracias Puko...

 

[Puko]

Como dije en mi primera respuesta: Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... Gracias Puko...

Al css le quitas el background al selector "aqui"
.aqui {
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}

y le agregas el class "aqui" a las etiquetas de las imágenes ... : <img class="aqui" ...

<div class="p-header-logo p-header-logo--image">
<a href="https://forobeta.com">
<img class="aqui" src="https://forobeta.com/uploads/forobeta-logo.png" srcset="" alt="ForoBeta | Foro de webmasters" width="255" height="100">
</a>
</div>

 

[RaynierL]

Tu proyecto utiliza algun framework? en React es realmente sencillo manejar esto a través de los estados.

 

[JoseZabaleta]

Al css le quitas el background al selector "aqui"
.aqui {
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}

y le agregas el class "aqui" a las etiquetas de las imágenes ... : <img class="aqui" ...

<div class="p-header-logo p-header-logo--image">
<a href="https://forobeta.com">
<img class="aqui" src="https://forobeta.com/uploads/forobeta-logo.png" srcset="" alt="ForoBeta | Foro de webmasters" width="255" height="100">
</a>
</div>

Gracias Puko... Funciona... Ahora bien, no es una animación infinita la que busco, sino un zoom o un giro que se produzca una vez, al cargarse la imagen... como estos ejemplos: https://www.enriquejros.com/efectos-imagenes-css/#Zoom_y_cambios_de_tamano pero al cargarse la imagen, en lugar de al pasar el mouse...

 

[JoseZabaleta]

Tu proyecto utiliza algun framework? en React es realmente sencillo manejar esto a través de los estados.

Hola... Es un Wordpress... Abrazo...

 

[Puko]

Gracias Puko... Funciona... Ahora bien, no es una animación infinita la que busco, sino un zoom o un giro que se produzca una vez, al cargarse la imagen... como estos ejemplos: https://www.enriquejros.com/efectos-imagenes-css/#Zoom_y_cambios_de_tamano pero al cargarse la imagen, en lugar de al pasar el mouse...

1. Al selector de la etiqueta <img> que le pusimos "aqui" le ponemos un 'margen' para cuando haga zoom ...
.aqui {
position: absolute;
top: 23px;
left: 34px;
}

2.Si solo es una vez la 'animacion' , le quitamos infinite y dejamos 6s para la velocidad de la animacion...
.aqui {
position: absolute;
top: 23px;
animation: hoverx 6s;
left: 34px;
}

3. Para hacer la animacion hover con keyframes...
3.1 Le pondremos un nombre por ejemplo : "hoverx" ...
@keyframes hoverx{
...
}
3.2 Para la animacion zoom, dividimos el 100% entre 3, cuando inicia, cuando hace zoom y cuando vuelve a su tamaño ...
3.2.1 Cuando inicia le ponemos scale 1, cuando hace zoom 1.2 y cuando vuelve a su tamaño 1 ...

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

*Al codepen abajo dale click en "Rerun" para que se vuelva a "cargar"

 

[JoseZabaleta]

1. Al selector de la etiqueta <img> que le pusimos "aqui" le ponemos un 'margen' para cuando haga zoom ...
.aqui {
position: absolute;
top: 23px;
left: 34px;
}

2.Si solo es una vez la 'animacion' , le quitamos infinite y dejamos 6s para la velocidad de la animacion...
.aqui {
position: absolute;
top: 23px;
animation: hoverx 6s;
left: 34px;
}

3. Para hacer la animacion hover con keyframes...
3.1 Le pondremos un nombre por ejemplo : "hoverx" ...
@keyframes hoverx{
...
}
3.2 Para la animacion zoom, dividivos el 100% entre 3, cuando inicia, cuando hace zoom y cuando vuelve a su tamaño ...
3.2.1 Cuando inicia le ponemos scale 1, cuando hace zoom 1.2 y cuando vuelve a su tamaño 1 ...

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

*Al codepen abajo dale click en "Rerun" para que se vuelva a "cargar"

Profundamente agradecido Puko... Eres bueno... Abrazo...