1

Como puedo hacer funcionar el transition al ejemplo 1 que tiene el color hecho con linear-gradient, como el ejemplo 2 que tiene un color solido.

Si es posible, solo en CSS

.e1 {
  width: 70px;
  height: 70px;
  background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #f00, #ff0);
  transition: background .5s ease-in-out;
}

.e1:hover {  
  background: linear-gradient(#2d0059, transparent), linear-gradient(200deg, #a739a8, #b00000, #b5b500);
}

.e2 {
  width: 70px;
  height: 70px;
  background: red;
  transition: background .5s ease-in-out;
}

.e2:hover {  
  background: yellow;
}
Ejemplo 1
<div class="e1"></div>
<br>
Ejemplo 2
<div class="e2"></div>

4
  • 2
    ¿Qué es lo que quieres conseguir, quitar el linear-gradient y obtener un color sólido? el 6 sep. 2017 a las 13:42
  • No... ¿Como darle transition a linear-gradient? el 6 sep. 2017 a las 13:42
  • @PabloLozano - Si pasas con el ratón encima del ejemplo 1 quiero que se comporte igual al ejemplo 2... con transition el 6 sep. 2017 a las 13:45
  • Entendido ahora... el 6 sep. 2017 a las 13:45

2 respuestas 2

3

De momento linear-gradient no admite transitions, pero puedes simular algo similar moviendo el fondo. Lo que tienes aquí es ambos gradiente unidos (linea-gradient acepta todos los parámetros que quieras) y lo que se hace es mostrar la primera mitad o la segunda, transicionando la posición del fondo (background)

div#example1 {
    background-image: linear-gradient(200deg, #d047d1, #f00, #ff0, #a739a8, #b00000, #b5b500);
    background-size: auto 210%;
    background-position: 0 100%;
    transition: background-position 0.5s;
    width: 200px;
    height: 100px;
  
    /* ...and various other button styles */
}

div#example1:hover {
    background-position: 0 0;
}
<div id="example1"></div>

La otra solución es tener dos div, uno encima(o dentro) de otro, y cambiar la transparencia del que esté encima (o dentro) para transicionar entre totalmente transparente y totalmente opaco, teniendo cada div un linear gradient distinto, pero complica más el añadir texto u otros elementos.

2

Según he leído aquí, no está soportado por CSS, pero se puede simular utilizando la propiedad opacity.

.e3 {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #f00, #ff0);
}

.e3:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(#2d0059, transparent), linear-gradient(200deg, #a739a8, #b00000, #b5b500);
    opacity: 0;
    transition: all .5s ease-in-out;
}

.e3:hover:after {
    opacity: 1;
}
<div class="e3"></div>
<br>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.