如何阻止CSS3動畫播放一次並在其中調用新動畫？

Question

現在我正在處理響應滑塊，並且正在爲第一個組調用動畫。我的滑塊是一個網格系統，設置爲HTML中的兩個li類。一個標記爲「負載」，另一個稱爲「過渡」。

我遇到的問題是，我的網站在所有內容中都有一個預加載程序加載，因此一旦加載欄完成，網格加載並且第一個li類進入「加載」，並且通過animateUp動畫出現。

所以當第一組進入時，它通過動畫向上，如果用戶激活下一個li類，它將轉換爲淡入淡出。不過，我希望能夠通過按下右箭頭鍵來阻止我的用戶在網格周圍旋轉，而不是在第二個裏面停止它們，並強制用戶使用後退鍵返回到第一個孩子，也停止了animateUp的進行，並讓第一個li類在animateUp播放後進行轉換。

這裏的的jsfiddle得到一個更好的主意http://jsfiddle.net/BNq6t/1/embedded/result/

您可以使用箭頭鍵導航（左/右）

（請注意如何當你繞回的第一個孩子animateUp扮演）

的HTML

<div id="slider"> 
     <ul> 
     <!-- #slider js PAGE 1 --> 
     <li class="load"> 

      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio5.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio3.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio9.png"> 


      <img src="/wordpress/wp-content/themes/newtheme/assets/images/sample8.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/sample4.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio1.png"> 

      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio2.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio6.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/readli.png">  

     </li> 
     <!--/PAGE 1 --> 

     <!-- #slider js PAGE 2 --> 
     <li class="transition"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio1.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png"> 

      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png"> 

      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png"> 
      <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png"> 
     </li> 
     <!--/PAGE 2 --> 
     </ul> 
    </div> 

的滑塊

jQuery(document).ready(function ($) { 

var slideCount = $('#slider ul li').length; 
var slideWidth = $('#slider ul li').width(); 
var slideHeight = $('#slider ul li').height(); 
var sliderUlWidth = slideCount * slideWidth; 

$('#slider').css({ width: slideWidth, height: slideHeight }); 

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

$('#slider ul li:last-child').prependTo('#slider ul'); 

function moveLeft() { 
    $('#slider ul').animate({ 
     left: + slideWidth 
    }, 500, function() { 
     $('#slider ul li:last-child').prependTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }) 
} 

function moveRight() { 
    $('#slider ul').animate({ 
     left: - slideWidth 
    }, 500, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }) 
} 

$('#back').click(function() { 
    moveRight(); 
}) 
$('#next').click(function() { 
    moveRight(); 
}) 

$('#next').click(function() { 
    if (('#next').click = clicked) { 
    ('#back:after').css('visbilility: visible;') 
    } 
}) 

$(document).keydown(function(e) { 
    if (e.keyCode == 39) { 
    moveRight(); 
    } else { 

    } 
}) 

$(document).keydown(function(e) { 
    if (e.keyCode == 37) { 
    moveLeft(); 
    } else { 

    } 
}) 

}）;

的CSS

#slider li.load img:nth-child(-n+3) { 
    animation: pushUp 2.4s linear; 
    -webkit-animation: pushUp 2.4s linear; 
    -moz-animation: pushUp 2.4s linear; 
    -o-animation: pushUp 2.4s linear; 
} 
#slider li.load img:nth-child(4), 
#slider li.load img:nth-child(5), 
#slider li.load img:nth-child(6) { 
    animation: pushUp .5s linear; 
    -webkit-animation: pushUp .5s linear; 
    -moz-animation: pushUp .5s linear; 
    -o-animation: pushUp .5s linear; 
} 
#slider li.load img:nth-child(7), 
#slider li.load img:nth-child(8), 
#slider li.load img:nth-child(9) { 
    animation: pushUp 1.1s linear; 
    -webkit-animation: pushUp 1.1s linear; 
    -moz-animation: pushUp 1.1s linear; 
    -o-animation: pushUp 1.1s linear; 
} 
#slider li.transition img { 
    animation: fadeIn .55s; 
    -webkit-animation: fadeIn .55s; 
      -moz-animation: fadeIn .55s; 
      -o-animation: fadeIn .55s; 
} 

謝謝。（另外，在這個職位的代碼比一箇中的jsfiddle在問候的圖像不同）

Answer 1

有一個iteration-count財產。

你可以使用它。

這裏是所有的 '前綴的' 屬性：

animation-name: 
animation-duration: 
animation-iteration-count: 
animation-direction: 
animation-timing-function:  
animation-fill-mode: 
animation-delay: 

http://css-tricks.com/snippets/css/keyframe-animation-syntax/