Transicion de imagenes css

Inicio » Transicion de imagenes css

transición css hover

He creado un pequeño mixin SCSS que permite la transición entre 2 imágenes de fondo diferentes utilizando pseudo selectores antes y después. Están en diferentes capas de índice z. La que está delante empieza con opacidad 0 y se hace visible con hover.

La pregunta con enlace a un ejemplo en jsfiddle necesitaba un pequeño cambio, que es poner una imagen vacía en .title a como background:url(enlace a una imagen vacía); lo mismo que se pone en .title a:hover pero que sea una imagen vacía, y el código funcionará.

Estuve luchando con esto un poco, primero usé una pila de imágenes una encima de la otra y cada tres segundos, intentaba animar a la siguiente imagen de la pila y tirar la imagen actual al fondo de la pila. Al mismo tiempo estaba usando animaciones como se muestra arriba. No pude conseguir que funcionara por la vida de mí.

transición css: background-image

Teniendo en cuenta que las imágenes de fondo no pueden ser animadas, he creado un pequeño mixin SCSS que permite la transición entre 2 imágenes de fondo diferentes utilizando pseudo selectores antes y después. Están en diferentes capas de índice z. La que está delante empieza con opacidad 0 y se hace visible con el hover.

La pregunta con enlace a un ejemplo en jsfiddle necesitaba un pequeño cambio, que es poner una imagen vacía en .title a como background:url(enlace a una imagen vacía); lo mismo que se pone en .title a:hover pero que sea imagen vacía, y el código funcionará.

Estuve luchando con esto durante un tiempo, primero utilicé una pila de imágenes superpuestas y cada tres segundos, intentaba animar a la siguiente imagen de la pila y tirar la imagen actual al fondo de la pila. Al mismo tiempo estaba usando animaciones como se muestra arriba. No pude conseguir que funcionara por la vida de mí.

transición css

Las transiciones CSS proporcionan una forma de controlar la velocidad de la animación al cambiar las propiedades CSS. En lugar de hacer que los cambios de las propiedades tengan efecto inmediatamente, puedes hacer que los cambios de una propiedad tengan lugar durante un periodo de tiempo. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Con las transiciones CSS activadas, los cambios se producen en intervalos de tiempo que siguen una curva de aceleración, todo ello personalizable.

Las transiciones CSS permiten decidir qué propiedades se van a animar (enumerándolas explícitamente), cuándo comenzará la animación (estableciendo un retardo), cuánto durará la transición (estableciendo una duración) y cómo se ejecutará la transición (definiendo una función de temporización, por ejemplo, lineal o rápida al principio, lenta al final).

El autor de la web puede definir qué propiedad debe ser animada y de qué manera. Esto permite la creación de transiciones complejas. Como no tiene sentido animar algunas propiedades, la lista de propiedades animables está limitada a un conjunto finito.

generador de transiciones css

Para que tenga sentido, he definido 4 fotogramas clave, y he especificado que lo que tenga esta animación adjunta será opaco durante el primer 45%, y luego transparente durante el último 45%. La animación se repetirá siempre, durará 10 segundos, y se ejecutará hacia adelante y luego hacia atrás. En otras palabras, la imagen 1 será visible durante 4,5 segundos, seguida de un desvanecimiento de 1 segundo, seguido de 4,5 segundos de imagen 2 visible. Luego se invertirá, lo que significa que la imagen 1 y la 2 serán visibles durante 9 (4,5 x 2) segundos cada vez.

Bastante bien – esto puede ser fácilmente extendido simplemente cambiando la propiedad background-image con JS, y hace las cosas mucho más simples. No estoy seguro de si este comportamiento es parte de la especificación o no, y no he visto el apoyo en cualquier lugar que no sea en los navegadores antes mencionados.

Ir arriba