css - 制作跨浏览器的css动画

Question

我有只能在 Chrome 中工作的 css 动画。我怎样才能让它跨浏览器？以下是代码及其 jsfiddle:

HTML:

<div class="main-nav">
    <a href="#">
        <div id="outer">
            <p>Hello!!!</p>
        </div>
    </a>
</div>

SCSS:

.main-nav {
    font-size: 250%;
    width: 280px;
    margin: 0 200px;
    text-shadow: 2px 1px 6px lighten(#141414, 50%);
    color: #141414;

    a {
        text-decoration: none;
    }

    #outer {
        background:linear-gradient(to right, #1abc9c 50%, #444 50%);
        background-size:200% 100%;
        background-position:right bottom;
        font-size:64px;
        text-align:center;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        transition:all 1s;

        &:hover {
            background-position:left  bottom;
            cursor:pointer;
        }
    }
}

Jsfiddle:http://jsfiddle.net/yakovenkodenis/jq4rb3ox/3/ (它只能在 Chrome 中正常工作!)

Answer 1

background-clip: text 属性仅在 webkit(safari 和 chrome)中受支持，因此无法在其他浏览器中使用。您可以尝试制作一个 svg 并为其填充动画，但希望其他浏览器有一天会采用它。