Transition doesn't work with border-image and gradient - html

Question

I am using border-image with gradient and it works fine, but it seems transition is not supported for it.
Is it possible to achieve transition on hover for this example?
JsFiddle
div {
border:10px solid blue;
height:120px;
float:left;
transition:1s all;
border-image: linear-gradient(to bottom, white, blue) 1 100%;
}
div:hover {
border-image: linear-gradient(to bottom, skyblue, blue) 1 100%;
}
<div></div>

Answer 1

As the others already told you, it isn't possible to transition a gradient (yet). The best way to fake the effect would be to work with opacity, which can be transitioned. You don't need to add any elements however, the :before and :after pseudo elements will do just fine. have a look at the following css:
div {
height:120px;
width:10px;
padding: 0 10px;
background: salmon;
background-clip: content-box;
position: relative;
}
div:after, div:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content:'';
}
div:after {
background: linear-gradient(to bottom, white 0%, blue 100%);
z-index: -1;
transition: opacity 1s;
}
div:before {
background: linear-gradient(to bottom, skyblue 0%, blue 100%);
z-index: -2;
}
div:hover:after {
opacity: 0;
}
And an example: https://jsfiddle.net/et0ffrqx/2/

Answer 2

Not Possible
That isn't possible yet because linear-gradient is calculated as an image, not actually colors.
Solution
Try putting the <div> within another <div> which can act as a border. Then the outer <div> can have an animated background
I've found this codepen demonstrating how this can be done with JavaScript.
My best bet for you would be to have two <div> stacked on top of each other. The bottom <div> would be the target gradient and the top being the start. Then just fade the top <div>
#start {
position:absolute;
width: 100px;
height: 100px;
z-index: 1;
opacity: 1;
background: linear-gradient(red,blue);
transition: opacity 0.5s ease;
}
#end {
position:absolute;
width: 100px;
height: 100px;
background: linear-gradient(green,orange);
z-index: -1;
}
#start:hover {
opacity: 0;
}
<div id="start">Start</div>
<div id="end">End</div>
The snippet demonstrates a simple way to fade between gradients. Not perfect but smoother and without JavaScript. Put your other stuff in side the <div> and adjust the width and height to your needs.
Also try using :before and :after to avoid having duplicate divs

Answer 3

No
Animations aren't supported for those properties.
You can however, think of another way to accomplish this visually.
maybe you have 2 wrappers around something, and they are 2 different gradients, and there is padding around them to simulate the look of a border... and then the elements with the gradients have opacity that fades to and from on hover.
https://jsfiddle.net/sheriffderek/5uoypaoo/
<div class="gradient-1">
<div class="gradient-2"></div>
<div class="thing"></div>
</div>
.thing {
position: relative;
width: 200px;
height: 200px;
background: white;
float: left;
}
.gradient-1 {
position: relative;
background: linear-gradient(45deg, pink, blue);
opacity: 1;
padding: 1rem;
float: left;
}
.gradient-1:hover .gradient-2 {
opacity: 1;
}
.gradient-2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(45deg, lightgreen, orange);
opacity: 0;
transition: opacity 1s ease-in-out;
}