9

アニメーションをdivに設定しただけで成功しました。遅延が短すぎるので、証明してもらいたいです。アニメーション（0％から25％）とアニメーション（25％​​から50％）の間に遅延時間を追加するにはどうすればよいですか？コードは次のとおりです。

#flow{
      position:absolute;
      -webkit-animation:mymove 10s ease-in-out;
      -webkit-animation-iteration-count:3;
      -webkit-animation-delay:1s;
     }

@-webkit-keyframes mymove
    {
       0%{left:5px;}
       25%{left:127px;}
       50%{left:249px;}
       75%{left:371px;}
       100%{left:5px;}
     }

皆さん!ご清聴ありがとうございました!答えは見つかりましたが、キーフレームのパーセンテージの定義の Api がわかりません!それについて知っている場合は、手を貸してください。どうもありがとうございました!

@-webkit-keyframes mymove
{
   0%{left:5px;} 
   25%{left:127px;}
   26%{left:127px;}
   27%{left:127px;}
   28%{left:127px;}
   29%{left:127px;}
   30%{left:127px;}
   31%{left:127px;}
   32%{left:127px;}
   33%{left:127px;}
   34%{left:127px;}
   35%{left:127px;} 
   50%{left:249px;}
   75%{left:371px;}
   100%{left:5px;}
 }
4

3 に答える 3

9

アニメーションの個々の部分を遅らせることはできないと思います。できることは、2 つのアニメーションを使用して、それらを遅延して開始することです。

#flow{
      position:absolute;
      -webkit-animation:
          mymove_first 10s 0s 10 ease-in-out,
          mymove_second 10s 2s 10 ease-in-out;
     }

@-webkit-keyframes mymove_first
    {
       0%{left:5px;}
       25%{left:127px;}
     }

@-webkit-keyframes mymove_second
    {
       50%{left:249px;}
       75%{left:371px;}
       100%{left:5px;}
     }
于 2011-11-21T10:29:42.637 に答える
0

パーセンテージで再生を一時停止できます（例に従って）：

@-webkit-keyframes mymove
{
   0%{left:5px;} 
   25%{left:127px;}
   35%{left:127px;} 
   50%{left:249px;}
   75%{left:371px;}
   100%{left:5px;}
 }

すべてのパーセンテージを 25% から 35% の間に入れる必要はありません。ブラウザーはそれらを無視しています。ピクセル 5 から 127 まで 0 から 25% に移動します。アニメーションが 10 秒の場合、それには 2.5 秒かかります。その後、25% から 35% の間で 1 秒一時停止します。次のアニメーションをピクセル 249 にすると、1.5 秒かかります...

お役に立てれば！

于 2014-08-19T14:13:27.100 に答える