背景颜色的过渡答案

【问题标题】：Transition of background-color背景颜色的过渡
【发布时间】：2010-12-10 16:56:06
【问题描述】：

我试图在悬停菜单项时使用background-color 制作过渡效果，但它不起作用。这是我的 CSS 代码：

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

#navdiv 是一个菜单 ul 项目列表。

【问题讨论】：

标签： css

【解决方案1】：

据我所知，转场目前在 Safari、Chrome、Firefox、Opera 和 Internet Explorer 10+ 中可用。

这应该会在这些浏览器中为您产生淡入淡出效果：

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

&lt;a&gt;Navigation Link&lt;/a&gt;

注意：正如 Gerald 在 cmets 中指出的那样，如果您将过渡放在 a 上，而不是放在 a:hover 上，它会在您的鼠标移动时淡出回原来的颜色远离链接。

这也可能派上用场：CSS Fundamentals: CSS 3 Transitions

【讨论】：

您也可以将过渡放入content #nav a，以便在用户将鼠标从链接上移开时恢复到原始状态。
摆弄 hover 和 click 过渡：jsfiddle.net/K5Qyx
把transition:放到非悬停状态不是更好吗？我认为每次用户悬停时，都会编译过渡..
对于未来的用户，此处不应使用供应商前缀
CSS transition 似乎无法处理可以测试的“线性渐变”颜色here。顺便说一句，@Ilium 的答案值得被标记为解决方案。

【解决方案2】：

对我来说，将转换代码与原始/最小选择器一起放置比使用 :hover 或任何其他附加选择器更好：

#content #nav a {
    background-color: #FF0;
    
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

#content #nav a:hover {
    background-color: #AD310B;
}

<div id="content">
    <div id="nav">
        <a href="#link1">Link 1</a>
    </div>
</div>

【讨论】：

并不是说好坏。只是如果您在 lement 本身上指定过渡，它将在元素悬停和“未悬停”时进行动画处理。而如果你把它应用到 :hover 上，当鼠标进入时你会有动画，但离开时没有。
这个解决方案总体上更好。过渡效果应该也应该在悬停时淡入，在模糊时淡出。

【解决方案3】：

实现此目的的另一种方法是使用animation，它提供了更多控制。

/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
@keyframes onHoverAnimation {
    0% {
        background-color: #FF0;  
    }
    100% {
        background-color: #AD310B;
    }
}

#content #nav a {
    background-color: #FF0;
    
    /* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
    animation-duration: 1s; /* same as transition duration */
    animation-timing-function: linear; /* kind of same as transition timing */
    animation-delay: 0ms; /* same as transition delay */
    animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
    animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
    animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
    animation-play-state: running; /* can be set dynamically to pause mid animation*/
    
    
}

#content #nav a:hover {
    /* animation wont run unless the element is given the name of the animation. This is set on hover */
    animation-name: onHoverAnimation;
}

【讨论】：