HTML 过渡不适用于 Grayfade答案

【问题标题】：HTML Transitions Aren't Working With GrayfadeHTML 过渡不适用于 Grayfade
【发布时间】：2014-02-16 07:27:28
【问题描述】：

我想要做的是将鼠标悬停在我的图片上，然后使用 grayfade CSS 东西让它逐渐变灰。出于某种我不知道的原因，它不起作用，即使我已经寻找了几个小时的过渡时间。请帮帮我！

这是我所有的代码（尽管您要查看的代码是样式标签中的 img 和 img:hover）：

<!doctype html>

<html>
    <head>
    <title>Basketball Uniforms 1/24/14</title>
    <style>
        * {
            margin: 0;
            font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
        }

        html { 
            background: url(assets/background.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        header {
            width: cover;

            padding: 2em;

            background-color: rgba(17, 40, 87, 0.85);

            border-radius: 0 0 2em 2em;
        }

        h1 {
            text-align: center;
            vertical-align: middle;

            color: #FFBB00;
        }

        h2 {
            text-align: center;
            vertical-align: middle;

            color: #FFBB00;
        }

        h3 {
            text-align: center;
            vertical-align: middle;

            color: #FFBB00;
        }

        table {
            margin-left: auto;
            margin-right: auto;

            border-collapse: separate;
            border-spacing: 0 2em;
        }

        td {            
            border-style: groove;
            border-width: 2em;
            border-color: rgba(59, 59, 59, 0.95);
            border-radius: 4em;

            padding: 4em;
        }

        .odd {
            background-color: rgba(242, 153, 51, 0.80);
            color: #22499C;
        }

        .even {
            background-color: rgba(51, 112, 242, 0.80);
            color: #FEBB2D;
        }

        img {
            width: 26em;
            height: 20em;

            border-radius: 1em;

            -webkit-transition: -webkit-filter 0.5s ease;
            -moz-transition: -moz-filter 0.5s ease;
            -ms-transition: -ms-filter 0.5s ease;
            -o-transition: -o-filter 0.5s ease;
            transition: filter 0.5s ease;
        }

        img:hover {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: url(assets/grayscale.svg);
            filter: gray;
        }

        h4 {
            padding-top: 1em;

            text-align: center;
        }

        h5 {
            text-align: center;
        }

        footer {
            width: cover;

            padding: 2em;

            background-color: rgba(17, 40, 87, 0.85);

            border-radius: 2em 2em 0 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>Basketball Uniforms Through the Ages</h1>
        <h2>Leo Alfred&#58; 1/24/2013</h2>
    </header>

    <table>
        <tr>
            <td class="odd">
                <a href="http://uniformcritics.com/basketball/nba/portland-trail-blazers/1970-trail-blazers-debut-road-uniform-vintage-retro-throwback/">
                    <img src="assets/1970.jpg" title="1970&#39;s Basketball" alt="1970&#39;s Basketball">
                </a>

                <h4>Portland Trail Blazers</h4>
                <h5>1970 - 1971 Debut Road Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="even">
                <a href="http://uniformcritics.com/basketball/nba/golden-state-warriors/1980s-warriors-away-california-uniform-vintage-retro-throwback/">
                    <img src="assets/1980.jpg" title="1980&#39;s Basketball" alt="1980&#39;s Basketball">
                </a>

                <h4>Golden State Warriors</h4>
                <h5>1980 - 1985 Road Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="odd">
                <a href="http://uniformcritics.com/basketball/nba/milwaukee-bucks/1990s-bucks-road-uniform-throwback/">
                    <img src="assets/1990.jpg" title="1990&#39;s Basketball" alt="1990&#39;s Basketball">
                </a>

                <h4>Milwaukee Bucks</h4>
                <h5>1993 - 2005 Road Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="even">
                <a href="http://uniformcritics.com/basketball/nba/la-clippers/2000s-clippers-away-uniform-red/">
                    <img src="assets/2000.jpg" title="2000&#39;s Basketball" alt="2000&#39;s Basketball">
                </a>

                <h4>LA Clippers</h4>
                <h5>2000 - 2009 Away Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="odd">
                <a href="http://www.spartanjerseys.com/michigan-state-basketball-jersey/2010-2011/">
                    <img src="assets/2010.jpg" title="2010&#39;s Basketball" alt="2010&#39;s Basketball">
                </a>

                <h4>Michigan State Spartans</h4>
                <h5>2010-2011 Uniform</h5>
            </td>
        </tr>
    </table>
    <footer>
        <h2>An LFX Design Website</h2>
        <h3>&#169; 2014 LFX Design</h3>
    </footer>
</body>
</html>

提前感谢您帮助我解决过渡灰度问题！

【问题讨论】：

标签： html css css-transitions transition

【解决方案1】：

重新排序transition 属性，似乎有一些干扰。首先放置transition: filter 0.5s ease 似乎可以解决它。我认为这与它覆盖了其他前缀属性有关。

EXAMPLE HERE

img {
    transition: filter 0.5s ease;
    -moz-transition: -moz-filter 0.5s ease;
    -ms-transition: -ms-filter 0.5s ease;
    -o-transition: -o-filter 0.5s ease;
    -webkit-transition: -webkit-filter 0.5s ease;
}

img:hover {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(assets/grayscale.svg);
    filter: gray;
}

使用all、(example) 时不会发生这种情况，因此我认为使用-webkit-filter 作为属性值存在问题。我猜这是浏览器支持相关的问题。

【讨论】：