悬停时从渐变到非渐变背景的过渡

Question

I am using a gradient to set the background color on one element. The thing is, I am also having an " hover " background but not using the gradient. At the minute, when I hover on an element having the class .tinted it flashes as it first display no background and then apply the rgba(0,0,0,0.65) Is there any way that the transition could directly go from background: gradient(left, rgba(0,0,0,0.65), rgba(0,0,0,0.30)) to rgba(0,0,0,0.65) ?

.tinted {
    transition: background-color 500ms linear;
    background: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}

.tinted:hover {
    background: rgba(0, 0, 0, 0.65);
}

Answer 1

You need to define the gradients with background-image and the plain color with background-color :

.tinted {
    transition: background-color 500ms linear;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}

.tinted:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

DEMO

Answer 2

This Is What you Can Use For This Approach:

 #box{ width: 200px; height: 300px; background-color: orange; background-image: -webkit-linear-gradient(top, crimson 0%, transparent 100%); transition: all 1s ease-in-out; } #box:hover{ background-color: crimson; } 

 <div id="box"></div> 

Answer 3

A posibility is to set a gradient that has 2 parts, one with the color changing, and the other with a constant color.

And change the part of the gradient that you are showing with background-image.position

 .test { width: 300px; height: 100px; background-image: linear-gradient(to right, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.3)); background-size: 200% 100%; background-position: 100% 0%; transition: background-position 1s; margin: 10px; } .test:hover { background-position: 0% 0%; } #test2 { background-image: linear-gradient(to right, blue 50%, red 100%); } 

 <div class="test"></div> <div class="test" id="test2"></div>