choose a specific css animation frame

Question

I'm trying to make a spinner where it'll stop on a certain frame. I'm trying to use CSS for the animation to negate JS animations but not sure I can get it to stop on a specific frame. I've got a simple spinner with my 3 numbers here. I'd like to randomly get number 1-3(0-2) and have it stop on that given frame.

Is that possible with 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

It would be better to use css transitions for this. And yes, if you want to randomize the animation frame, definitely JavaScript. That way you can use it in code.

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/