【问题标题】: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;
    }
    <a>Navigation Link</a>

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

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

    【讨论】:

    • 您也可以将过渡放入content #nav a,以便在用户将鼠标从链接上移开时恢复到原始状态。
    • 摆弄 hoverclick 过渡: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;
    }
    

    【讨论】: