过渡不适用于边框图像和渐变

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 div s

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;
}