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:
CSS:
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!