1

こんにちは、私は現在、css3 キーフレームを使用してイメージ ショー (小さい) を作成していますが、動作していますが、何らかの方法で Firefox でのみ動作しており、問題に取り組むことができないようです :( 最新バージョンの chrome firefox で動作し、 safari ですが、現在は firefox でのみ動作しています。

誰でもそれを助けることができますか？

上記のすべてのブラウザーで動作する css は次のとおりです。

@keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

.case-image {
  position:relative;
  height:auto;
  width:32%;
}
.case-image img {
  position:absolute;
  width:                100%;
  height:               auto;
  left:0;
 border:                            3px solid #f8d206;
    -moz-border-radius:                 15px;
    border-radius:                      15px;
    margin-left:                        -3px;
    margin-right:                       -3px;

}

.case-image img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 8s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}
.case-image img:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
.case-image img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
.case-image img:nth-of-type(3) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.case-image img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
4

1 に答える 1

2

キーフレームのベンダー プレフィックスを含める必要があります。例については、こちらを参照してください: http://jsfiddle.net/tjfogarty/Gzxkq/

@keyframes pulse {
    0% { width: 40px; height: 40px; }
    100% { width: 50px; height: 50px; }
}

@-webkit-keyframes pulse {
    0% { width: 40px; height: 40px; }
    100% { width: 50px; height: 50px; }
}

@-moz-keyframes pulse {
    0% { width: 40px; height: 40px; }
    100% { width: 50px; height: 50px; }
}

等...

http://leaverou.github.com/prefixfree/のようなものを使用して、それを処理することもできます。

于 2013-03-17T15:50:30.937 に答える