0

たまたま、outlook.com が提示するリニア アニメーションについて質問を投稿したところ、ここにいる友人の何人かは、それは不可能だと言いました。CSS3キーフレームでそれを達成できました。ただし、IE10 でのみ動作し、Firefox と Chrome では動作しないようです。w3schools から firefox と chrome の代替タグを付けましたが、なぜ機能しないのかわかりません。これは、私のコードを含む jsfiddle からのリンクです。念のためgithubのリンクも貼っておきます。この点で私を助けてください。

JSFiddle

ギットハブ

私のコードの一部は次のとおりです。このコードは、タイミングをわずかに変更して、.(ドット) ごとに繰り返されます。このように5点あります。

 .linearAnimate1
{
    animation-delay: 0s;
    -moz-animation-delay:0s; /* Firefox */
    -webkit-animation-delay:0s; /* Safari and Chrome */
    animation-duration: 10s;
    -moz-animation-duration:10s; /* Firefox */
    -webkit-animation-duration:10s; /* Safari and Chrome */
    animation-iteration-count: infinite;
    -moz-animation-iteration-count:infinite; /* Firefox */
    -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/
    animation-name: makedotspin1;
    -moz-animation-name: makedotspin1;
    -webkit-animation-name: makedotspin1;

}

@keyframes makedotspin1 {
    from {
      animation-timing-function: ease;
      -moz-animation-timing-function:ease; /* Firefox */
      -webkit-animation-timing-function:ease; /* Safari and Chrome */
      transform: translateX(0px);
      -moz-transform: translateX(0px);
      -webkit-transform: translateX(0px);
      visibility:visible;
    }
    25% {
      animation-timing-function: ease-in;
      -moz-animation-timing-function:ease-in; /* Firefox */
      -webkit-animation-timing-function:ease-in; /* Safari and Chrome */
      transform: translateX(450px);
      -moz-transform: translateX(450px);
      -webkit-transform: translateX(450px);          
      animation-delay: 0.5s;
      -moz-animation-delay: 0.5s;
      -webkit-animation-delay: 0.5s;

    }
    50% {
      animation-timing-function: ease-inout;
      transform: translateX(900px);
      -moz-transform: translateX(900px);
      -webkit-transform: translateX(900px);
      visibility:hidden;
      animation-delay: 10s;
      -moz-animation-delay: 10s;
      -webkit-animation-delay: 10s;
    }
    to
    {
    }
}

アニメーション ボタンのメトロ スタイル プログレスバー

4

2 に答える 2

1

レイアウト エンジンごとに @keyframes のプレフィックスが必要だと思います。たとえば、次のようになります。

@-webkit-keyframes {} @-moz-keyframes

等、IE10は公式仕様に対応しているため動作します

于 2013-01-09T18:08:59.653 に答える
0

ついに私は問題を発見しました。順序付けされていないリストを使用したので、次のCSSを使用しました

 ul li
    {
        display: inline;       
        font-size:4em; 
        visibility:hidden;   
    }

ただし、表示がインラインであり、すべてのリストアイテムが互いに重なり合っているため、Mozillaとchromeはアニメーションを実行できません。この問題を修正するには、2つのことを行う必要がありました。1）キーフレームに-moz-と-webkit-のプレフィックスを追加する必要がありました。2）次のように表示をインラインブロックに変更すると、問題が修正されました。これで、アニメーションはMozilla、IE、Chromeで動作します

 ul li
    {
        display: inline-block;       
        font-size:4em; 
        visibility:hidden;   
    }
于 2013-01-10T16:44:22.043 に答える