選擇一個特定的CSS動畫幀

Question

我想讓一個微調器停在某個框架上。我試圖使用CSS動畫來否定JS動畫，但不知道我可以讓它停止在特定的框架上。我有一個簡單的微調我的3個號碼here。我想隨機獲得數字1-3（0-2），並在給定幀中停止。

JS/cCSS有可能嗎？

body { 
    font-family: 'Lucida Grande', Verdana, Arial; 
    font-size: 12px; 
    } 

    #stage { 
    margin: 80px auto; 
    width: 600px; 
    height: 400px; 
    perspective: 5000; 
    } 

    #rotate { 
    margin: 0 auto; 
    width: 600px; 
    height: 400px; 
    } 

    .ring { 
    margin: 0 auto; 
    height: 110px; 
    width: 600px; 
    -webkit-transform-style: preserve-3d; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    } 

    .ring > :nth-child(odd) { 
    background-color: #995C7F; 
    } 

    .ring > :nth-child(even) { 
    background-color: #835A99; 
    } 

    .poster { 
    position: absolute; 
    left: 250px; 
    width: 100px; 
    height: 100px; 
    opacity: 1; 
    color: rgba(0,0,0,1); 
    -webkit-border-radius: 10px; 
    } 
    .a { 
    transform: rotateX(0deg) translateZ(40px); 
    } 
    .b { 
    transform: rotateX(120deg) translateZ(40px); 
    } 
    .c { 
    transform: rotateX(240deg) translateZ(40px); 
    } 

    .done { 
    transform: rotate(0deg); 
    } 

    .poster > p { 
    font-family: 'Georgia', serif; 
    font-size: 36px; 
    font-weight: bold; 
    text-align: center; 
    margin-top: 28px; 
    } 

    #ring-1 { 
    -webkit-animation-name: x-spin; 
    -webkit-animation-duration: .6s; 

    } 

    #ring-2 { 
    -webkit-animation-name: back-y-spin; 
    -webkit-animation-duration: 4s; 
    } 

    #ring-3 { 
    -webkit-animation-name: y-spin; 
    -webkit-animation-duration: 3s; 
    } 

    @-webkit-keyframes x-spin { 
    0% { -webkit-transform: rotateX(360deg); } 
    50% { -webkit-transform: rotateX(180deg); } 
    100% { -webkit-transform: rotateX(0deg); } 
    } 

    @-webkit-keyframes y-spin { 
    0% { -webkit-transform: rotateY(0deg); } 
    50% { -webkit-transform: rotateY(180deg); } 
    100% { -webkit-transform: rotateY(360deg); } 
    } 

    @-webkit-keyframes back-y-spin { 
    0% { -webkit-transform: rotateY(360deg); } 
    50% { -webkit-transform: rotateY(180deg); } 
    100% { -webkit-transform: rotateY(0deg); } 
    } 

Answer 1

爲此，最好使用css轉換。是的，如果你想隨機化動畫幀，絕對是JavaScript。這樣你可以在代碼中使用它。

function goToNum(num) { 
    var angle = 0; 

    if (num == 2) { 
     angle = 110; 
    } 
    if (num == 1) { 
     angle = 220; 
    } 

    $('#ring-1').css('transform', 'rotateX(' + angle + 'deg)'); 
} 

var rand = Math.floor(Math.random() * 3); 
goToNum(rand); 

的jsfiddle：http://jsfiddle.net/foreyez/r8a4m0L5/