css - 背景图像过渡不适用于 Firefox

Question

我正在尝试使用 css 创建 Logo 过渡，但它只适用于 Chrome 而不是 FF 甚至 IE，所以我应该怎么做？

我的 CSS

.logo {
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background-image: url(../images/text.enter.png);
    border-style: none;
    height: 70px;
    left: 50%;
    margin-left: -138.5px;
    margin-top: -35px;
    position: absolute;
    top: 50%;
    width: 277px;
}

.logo:hover { background-image: url(../images/logo.png); }

Answer 1

演示:http://jsfiddle.net/lotusgodkk/GCu2D/242/

CSS:

* {
    margin: 0;
    padding: 0;
}
#nav li:hover {
    -webkit-animation: NAME-YOUR-ANIMATION 500ms;
    /* Safari 4+ */
    -moz-animation: NAME-YOUR-ANIMATION 500ms;
    /* Fx 5+ */
    -o-animation: NAME-YOUR-ANIMATION 500ms;
    /* Opera 12+ */
    animation: NAME-YOUR-ANIMATION 500ms;
    /* IE 10+, Fx 29+ */
}
#nav {
    width: 400px;
    margin: 40px auto;
}
#nav li {
    list-style-type:none;
    font-size:2em;
}
#nav li a {
    background-image:url('http://css-tricks.com/examples/CSS-Sprites/Example1After/img/image_nav.gif');
    background-repeat:no-repeat;
    padding: 0 0 0 90px;
    display: block;
    height: 72px;
}
#nav li a.item1 {
    background-position:0px 0px;
}
#nav li a:hover.item1 {
    background-position:0px -72px;
}
#nav li a.item2 {
    background-position:0px -143px;
}
#nav li a:hover.item2 {
    background-position:0px -215px;
}
#nav li a.item3 {
    background-position:0px -287px;
}
#nav li a:hover.item3 {
    background-position:0px -359px;
}
#nav li a.item4 {
    background-position:0px -431px;
}
#nav li a:hover.item4 {
    background-position:0px -503px;
}
#nav li a.item5 {
    background-position:0px -575px;
}
#nav li a:hover.item5 {
    background-position:0px -647px;
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 1;
    }
    50% {
        opacity:0.5;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 1;
    }
    50% {
        opacity:0.5;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 1;
    }
    50% {
        opacity:0.5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 1;
    }
    50% {
        opacity:0.5;
    }
    100% {
        opacity: 1;
    }
}

HTML:

<ul id="nav">
    <li><a class="item1" href="#" title="Some Link 1">Item 1</a>

    </li>
    <li><a class="item2" href="#" title="Some Link 2">Item 2</a>

    </li>
    <li><a class="item3" href="#" title="Some Link 3">Item 3</a>

    </li>
    <li><a class="item4" href="#" title="Some Link 4">Item 4</a>

    </li>
    <li><a class="item5" href="#" title="Some Link 5">Item 5</a>

    </li>
</ul>

我使用关键帧来制作动画。您可以在此处了解更多信息:http://css-tricks.com/snippets/css/keyframe-animation-syntax/

根据您的需要，该示例可能并不完美，但它肯定可以帮助您实现您想要的。