0

Mozilla Firefoxはもちろん、クロムでも機能しない画像スライドスライダーに-moz-プレフィックスを設定すると、css3スライダーを作成しようとしています。しかし、-moz プレフィックスを -webkit で使用しない場合、=webkit- プレフィックスは Chrome で適切に機能します。私もキャプションアニメーションを宣言します。キャプション アニメーションが機能していません。

私のコードを見てください：http://codepen.io/faeshaan/pen/pefwq

4

3 に答える 3

1

mozillaのキーフレーム定義とcssプロパティを追加した後（基本的に@Ilan Bialaがcssマークアップに関して言ったこと）、OSX Firefox v22ではアニメーションがまだ機能しませんでした。

イニシャルの追加:

left: 0px;

アニメーションが機能し始めました。CSSクラスで最初に明示的に定義されていない限り、Firefoxは左にアニメーション化するのが好きではなかったようです。

于 2013-07-24T20:40:12.037 に答える
0

コードを再配置して、キーフレーム アニメーションの定義を、それらを使用しているプロパティの下に配置しました。また、-webkit-animation: ;宣言しかなかったので、mozilla、microsoft、opera、および W3C 準拠のブラウザーの宣言を追加しました。

ファイルに小さなテキストを保存するため、も宣言に結合しanimation-iteration-count: ;ました。animation: ;

だから今、あなたが以前持っていたものの代わりに:

.container h5 {
    background:rgba(0,0,0,0.5);
    position:absolute;
    bottom:4px;
    width:100%;
    padding:5px;
    color:#fff;
    text-align:center;
    margin-bottom:0px;
    -webkit-animation: headings 20s;
}

@-webkit-keyframes headings {
  10%  {
     margin-bottom:4px;
  }
  15%,30% {
     margin-bottom:-200px;
  }
}

次のようになります。

.container h5 {
    background:rgba(0,0,0,0.5);
    position:absolute;
    bottom:4px;
    width:100%;
    padding:5px;
    color:#fff;
    text-align:center;
    margin-bottom:0px;
    -webkit-animation: headings 20s;
    -moz-animation: headings 20s;
    -ms-animation: headings 20s;
    -o-animation: headings 20s;
    animation: headings 20s;
}

そして、対応するキーフレーム定義を追加しました。

最後のペンはここにあります。

于 2013-07-24T20:00:55.360 に答える