背景图像渐变不动画 [英] Background-Image Gradient Not Animating

问题描述

我希望有人能帮助解决这个问题。

I am hoping someone can help clear this up.

我使用HTML5 CSS3在搜索栏上工作这里是一个工作示例 http://jsfiddle.net/4Mr6D/

I'm working on a search bar using HTML5 CSS3 here is the working example http://jsfiddle.net/4Mr6D/

 text-decoration: none;
transition: all 400ms;
-webkit-transition: all 400ms; 
-moz-transition: all 400ms; 
-o-transition: all 400ms;

开始行164或我在其中评论了SEARCH RESULTS
我试图获得渐变背景的动画悬停，它似乎只工作动画回到原来的颜色上卷。

starting line 164 or where I commented 'SEARCH RESULTS' I am trying to get the gradient background to animate on hover, it seems to only work animating back to the original color on rollout.

我已经尝试使用背景图像的动画， t工作。然后我转向使用关键字'all'，这是不工作。

I've tried using background-image to animate, that doesn't work. I then turned to using the keyword 'all' and that isn't working.

到目前为止，只有文本颜色将动画。有人可以帮助我，找到我在做错误的背景渐变动画吗？

So far, only the text color will animate. Can someone help me and locate what I'm doing wrong in getting the background gradient to animate also?

推荐答案

背景图片不可动画 。由于CSS中的渐变使用背景图片，因此您无法像使用文字颜色一样转换到新的图片。

Background images are not animatable. Since gradients in CSS use background images, you cannot use a transition to a new one like you would text color

有人说，如果您只有文字downs，你可以做一个工作使用伪元素和动画它的不透明度。以下是如何执行此操作的示例

With that being said, if you only have text in the drop downs, you can do a work around using a pseudo element and animating its opacity instead. The following is an example of how to do so

.container:after {
    content: "";
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #FF0000, #770000);
    background-image: -moz-linear-gradient(top, #FF0000, #770000);
    background-image: -ms-linear-gradient(top, #FF0000, #770000);
    background-image: -o-linear-gradient(top, #FF0000, #770000);
    background-image: linear-gradient(top, #FF0000, #770000);
    position:absolute;
    top:0;left:0;
    opacity:0;
    width:100%; height:100%;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: -1;
}
.container:hover { color:white; }
.container:hover:after { opacity:1; }

演示

此外，我会删除您的900ms延迟（我在我的演示） 。 对用户很恼人，他们希望获得即时反馈，而不是一秒钟后回复。

Also, I'd remove the 900ms delay that you have (I did in my demo). It is REALLY annoying for users, they want immediate feedback, not feedback a second later

你应该将你的代码本地化到相关的部分，就像我一样，以获得更快，更好的反应。没有人想看通过300行代码只需要20的问题

P.S. You should localize your code to the relevant parts like I did in order to get a quicker, better response. No one wants to look through 300 lines of code for a problem that only takes 20

特别感谢vals使用z-index改善它

Special thanks to vals for improving it using z-index

这篇关于背景图像渐变不动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！