How can I make transition
example 1 work that has the color made with linear-gradient
, like example 2 that has a solid color.
If possible, only inCSS
.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>
Linear-gradient doesn't currently support transitions, but you can simulate something similar by moving the background. What you have here is both gradients joined (line-gradient accepts all the parameters you want) and what is done is to show the first half or the second, transitioning the position of the background (background)
The other solution is to have two divs, one above (or inside) the other, and change the transparency of the one above (or inside) to transition between fully transparent and fully opaque, each div having a different linear gradient, but it complicates the process more. add text or other elements.
From what I have read here , it is not supported by CSS, but can be simulated using the
opacity
.