1

CSSでキーフレームアニメーションを作成しています。-webkit構文がサポートされているため、アニメーションはChromeで非常にうまく機能しているようです。

@-webkit-keyframes title_toggle 
{
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

Firefox用に以下のコードを試しましたが、機能しません

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

FFでこれが機能することを教えてください。

これはCSSの部分です。

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

.title{
    width:40%;
    height: 30%;
    position: absolute;
    top: 10%;
    left: 5%;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    -webkit-animation-name: title_toggle;
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:infinite;
    background-size: 100% 100%; 
     -moz-animation-name: title_toggle;
     -moz-animation-duration:5s;
     -moz-animation-iteration-count:infinite;
}

そしてこれはHTMLです

<div class="title"></div>
4

2 に答える 2

1

異なる画像間のクロスフェード補間の欠如について質問している場合、それはまだ広くサポートされていない仕様への非常に新しい追加です。

于 2012-10-02T20:21:30.227 に答える
0

Firefoxは背景画像のアニメーションをサポートしていないため、これは機能しません。背景画像はアニメートできません。Chromeには独自の実装がありますが、Firefoxでは機能しません。https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

于 2014-05-08T04:51:42.887 に答える