Estoy tratando de hacer la transición al pasar el mouse con css sobre una miniatura para que al pasar el cursor, el gradiente de fondo se desvanezca. La transición no funciona, pero si simplemente lo cambio a un rgba()valor, funciona bien. ¿Los gradientes no son compatibles? Intenté usar una imagen también, tampoco cambiará la imagen.
Sé que es posible, como en otra publicación, alguien lo hizo, pero no puedo entender exactamente cómo. Cualquier ayuda> Aquí hay algunos CSS para trabajar:
#container div a {
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
position: absolute;
width: 200px;
height: 150px;
border: 1px #000 solid;
margin: 30px;
z-index: 2
}
#container div a:hover {
background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}
Respuestas:
Los gradientes aún no admiten transiciones (aunque la especificación actual dice que deberían admitir transiciones de gradiente similar a similar mediante interpolación).
Si desea un efecto de fundido de entrada con un degradado de fondo, debe establecer una opacidad en un elemento contenedor y 'transitar' la opacidad.
(Ha habido algunas versiones de navegador que admitían transiciones en gradientes (por ejemplo, IE10. Probé transiciones de gradiente en 2016 en IE y parecían funcionar en ese momento, pero mi código de prueba ya no funciona).
Actualización: octubre de 2018 Transiciones de gradiente con nueva sintaxis sin prefijo [por ejemplo, degradado radial (...)] ahora confirmado para funcionar (¿otra vez?) En Microsoft Edge 17.17134. No sé cuándo se agregó esto. Todavía no funciona en las últimas versiones de Firefox y Chrome / Windows 10.
fuente
Una solución alternativa es la transición de la posición de fondo para dar el efecto de que el gradiente está cambiando: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
fuente
Una solución es usar la posición de fondo para imitar la transición de gradiente. Esta solución se utilizó en Twitter Bootstrap hace unos meses.
Actualizar
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
Aquí hay un ejemplo rápido:
Estado de enlace
Estado de desplazamiento
fuente
background-size, que no se puede en IE8. caniuse.com/#search=background-size Aparte de eso, es una buena solución.Para lo que vale, aquí hay un Sass mixin:
Uso:
@include gradientAnimation(red, blue, .6s);Mixin:
Tomado de esta increíble publicación en Medium de Dave Lunny: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
fuente
Sé que es una pregunta antigua, pero quizás alguien disfrute de mi forma de solución en CSS puro. El degradado se desvanece de izquierda a derecha.
fuente
A continuación, una etiqueta de anclaje tiene un hijo y un nieto. El nieto tiene el gradiente de fondo lejano. El niño en el fondo cercano es transparente, pero tiene el gradiente al que hacer la transición. Al pasar el mouse, la opacidad del niño pasa de 0 a 1, durante un período de 1 segundo.
Aquí está el CSS:
Y este es el HTML:
Lo anterior solo se prueba en la última versión de Chrome. Estas son las imágenes anteriores al pasar el mouse, a mitad de camino y completamente en transición:
fuente
La solución parcial para la transición de degradado es usar sombra de cuadro insertado: puede hacer la transición de la sombra del cuadro en sí o del color de fondo, por ejemplo, si crea una sombra de cuadro insertado del mismo color que el fondo y luego usa la transición en el color de fondo, crea ilusión ese fondo plano está cambiando a degradado radial
fuente
Puede FALSAR transiciones entre gradientes, utilizando transiciones en la opacidad de algunos gradientes apilados, como se describe en algunas de las respuestas aquí:
Animación CSS3 con gradientes .
También puede cambiar la posición, como se describe aquí:
Transición de gradiente CSS3 con posición de fondo .
Algunas técnicas más aquí:
Animación de gradientes CSS3 .
fuente
Encontró un buen truco en codepen que modifica la
opacitypropiedad pero logra que se desvanezca de un gradiente a otro al aprovechar los pseudoelementos. Lo que hace es establecer un:aftermodo para que cuando cambie la opacidad del elemento real, el:afterelemento se muestre para que parezca que se desvaneció. Pensé que sería útil compartir.Codepen original: http://codepen.io/sashtown/pen/DfdHh
fuente
Basado en el código CSS en su pregunta, he intentado el código de la siguiente manera y funciona para mí (ejecute el fragmento de código), e intente usted mismo:
Basado en el código CSS en su pregunta, tengo el código de prueba de la siguiente manera y funciona para mí, e intente por sí mismo:
¿Funciona para ti? Cambia el color según tu necesidad :)
fuente
Intente usar: before y: after (ie9 +)
fuente
Como se dijo. Actualmente, los gradientes no son compatibles con las transiciones CSS. Pero podría solucionarlo en algunos casos estableciendo uno de los colores en transparente, de modo que el color de fondo de algún otro elemento de envoltura brille y haga la transición en su lugar.
fuente
Lo uso en el trabajo :) IE6 + https://gist.github.com/GrzegorzPerko/7183390
No se olvide
<element class="ahover"><span>Text</span></a>si usa un elemento de texto.fuente
No puede hacer daño publicar otra vista ya que todavía no hay una forma oficial de hacerlo. Escribió un plugin jQuery liviano con el que puede definir un gradiente radial de fondo y una velocidad de transición. Este uso básico lo dejará desvanecerse, optimizado con requestAnimationFrame (muy suave):
http://codepen.io/Shikkediel/pen/xbRaZz?editors=001
Mantiene el fondo original y todas las propiedades intactas. También tiene seguimiento destacado como una configuración:
http://codepen.io/Shikkediel/pen/VYRZZY?editors=001
fuente
Quería que un div apareciera como una esfera en 3D y la transición a través de los colores. Descubrí que los colores de fondo degradados no hacen la transición (todavía). Coloqué un fondo degradado radial delante del elemento (usando el índice z) con un fondo sólido en transición.
entonces
div.balldebajo:luego cambió el color de fondo de la
div.bally ¡voila!https://codepen.io/keldon/pen/dzPxZP
fuente