选择特定的css动画框架。

Question

我在试着做一个旋转器，它会停在一个特定的框架上。我试图使用CSS的动画，以否定JS动画，但不确定我能否让它停止在一个特定的框架。我有一个简单的旋转与我的3个数字这里。我想随机得到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/