0

これは私が持っている現在のコードです

.jack_hitting{
        -moz-animation: jackhitting 0.5s infinite;
    }

    @-moz-keyframes jackhitting {  
        0% {  
          background-position: -8px -108px;
        } 

        20% {  
          background-position: -41px -108px;
        }

        40% {  
          background-position: -73px -108px;
        }

        60% {  
          background-position: -105px -108px;
        }

        80% {  
          background-position: -137px -108px;
        }

        100% {  
          background-position: -8px -108px;
        }
    }

これにより、背景画像が次の画像にスライドしますが、スライドさせたくないので、基本的に次のjsコードのように機能します。

document.getElementById('id').style.backgroundPosition='-8px -108px';

やりたいことができる効果はありますか？

前もって感謝します ：）

4

1 に答える 1

1

私はそれを見つけたと思います：step-start （アニメーションタイミング関数カテゴリでこれを行うことができる複数の1つであると思います）

animation: jackhitting 10s step-start infinite;

長い形式は

animation-name: jackhitting;
animation-duration:    10s;
animation-timing-function: step-start;
animation-iteration-count:    infinite;

残念ながら、今のところ、ブラウザごとにプレフィックスを付ける必要があります。

これをテストするフィドルは次のとおりです: http://jsfiddle.net/Ym6b5/4/ (div が大きすぎます。背景画像が移動するのを見て、それがあなたの求めているものかどうかを確認してもらいたいと思いました)

animation-durationは、キーフレームを通過するのにかかる合計時間です。ステップ間の遅延だと思っていたアニメーション遅延は、アニメーションが開始 されるまでの遅延です。http://dev.w3.org/csswg/css3-animations

それがあなたが探していたものであることを願っています。乾杯、イソ

于 2012-03-07T17:03:37.513 に答える