javascript - 选择特定的 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/