在css3動畫中添加延遲時間

我只是將動畫設置爲div併成功。現在我想證明它是因爲它的延遲太短！所以我怎麼可以添加動畫（0％至25％）和動畫（25％〜50％）這裏之間的延遲時間是代碼：在css3動畫中添加延遲時間

#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;} 
}

來源

2011-11-21 Jayce Lin

我不認爲你可以延遲動畫的單個部分。你可以做什麼，是使用兩個動畫，並延遲啓動它們。

#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-21 10:29:42 gefangenimnetz

我做了類似的事情，但它太複雜了http://jsfiddle.net/HhREH/1/這就像發射7種不同的彈弓以這種方式，1分鐘後，他們所有的人相互碰撞。 –

我遇到了這個問題，據我所知，沒有jQuery你不能延遲幀。

您可以延遲動畫的開始。您也可以使動畫完成與原始框架相同的狀態。

平均一個我用的，是能夠做到多個動畫，例如：

你的div：

<div id="bannerImg" class="banner-RunAnimation"></div>

運行動畫

.RunAnimation { 
         -webkit-animation: animation1 3s 0s 1 ease-in-out, 
         animation2 5s 5s 1 ease-out forwards; 
      }

動畫：

@-webkit-keyframes animation1 { 
0% {-webkit-transform: translateY(-0px);} 
50% {-webkit-transform: translateY(-150px);} 
100% {-webkit-transform: translateY(-150px); 
     opacity:0;} 
}  

@-webkit-keyframes animation2 { 
0% {transform: translateY(-0px);} 
100% {transform: translateY(-150px);} 
}

通過d elaying動畫和使用不透明，你可以做qutie幾件事情，如果這不利於調查的jQuery

來源

2013-06-17 15:16:57 Switchfire

可以暫停與播放百分比（以下你的例子）：

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

你不需要將所有百分比都放在25％到35％之間，瀏覽器忽略它們。你從0到25％從像素5移動到127，如果你的動畫是10秒，它將需要2.5秒來做到這一點，然後在25％到35％之間暫停1秒，因爲它不會移動相同的像素，然後繼續下一個動畫像素249，它將需要1.5秒，等等......

希望這有助於！

來源

2014-08-19 14:13:27 user2367101

在css3動畫中添加延遲時間

回答

相關問題