choose a specific css animation frame

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?

  • remove an id after an animation in jquery
  • How to show animated image from PNG image using javascript? [ like gmail ]
  • How to tween between two colours using three.js?
  • jQuery animated number counter from zero to value
  • SVG Animation Problems
  • Animation in javascript, a starting point
  • 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); }
      }
    

  • reload a javascript after CSS3 Animation is finished
  • Want to repeat animation on div for infinity times in jQuery?
  • Can i change about:config in mozilla via javascript?
  • Scrolling with animation
  • Custom path animation using JQuery
  • Why isn't this circle rotating around the correct center?
  • One Solution collect form web for “choose a specific css animation frame”

    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/