Changing a CSS Animation using jQuery

Question

I've got the following keyframe animation,

@-webkit-keyframes rotate {
  from { 
    -webkit-transform: rotateY(0); 
    -moz-transform: rotateY(0); 
    transform: rotateY(0);
  }

  to { 
    -webkit-transform: rotateX(2160deg); 
    -moz-transform: rotateX(2160deg); 
    transform: rotateX(2160deg); 
   }
}

Now under a certain condition, I'd like to change the to {} part of this animation, and then the rotation.

I'd like to achieve this using .css (?). How would I do this without using multiple animation, but just change the CSS instead?

What do you want to change it to? What's the condition? Do you prefer vanilla JavaScript or jQuery? — TylerH
– TylerH, Commented Nov 14, 2017 at 23:45
@TylerH I prefer jQuery - I want to make the animation more random, so I will have a Random(10) * 180deg or something, I want it to be randomized, and not always be the exact same. — Martijn Ebbens
– Martijn Ebbens, Commented Nov 14, 2017 at 23:49

Community · Accepted Answer · 2020-06-20 09:12:55Z

.css doesn't support -webkit-keyframes that way. However, you can generate a new WebKit keyframe on the fly by appending a style tag. In this code I used JavaScript's multi-line quote character ` (lowercase tilde).

If you want to be able to animate anything via CSS transitions:

var uniqueRotate = 0;

$('#test').click(function () {
  var amountToRotate = Math.floor(180 * Math.random()) + 'deg',
      myRotateId = 'rotate' + uniqueRotate++;
  $('<style>')
    .text(`
    @-webkit-keyframes ` + myRotateId + ` {
      from { 
        -webkit-transform: rotateY(0); 
        -moz-transform: rotateY(0); 
        transform: rotateY(0);
      }

      to { 
        -webkit-transform: rotateX(` + amountToRotate + `); 
        -moz-transform: rotateX(` + amountToRotate + `); 
        transform: rotateX(` + amountToRotate + `); 
       }
    }
    `)
    .appendTo(document.body);
  $(this).css('animation', '1s ease-out 0s 1 ' + myRotateId);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<div id='test'>Testing cool stuff! Please click me!</div>

If you only ever want to change transform:

var uniqueRotate = 0;

$('#test').click(function () {
  var amountToRotate = 180 * Math.random(),
      animationTime = 2*1000,
      updatePerMs = 20,
      iterations = 0; // every 20 ms we update our timer
  var myTimer = setInterval(function () {
    iterations++;
    var ratio = (updatePerMs*iterations) / animationTime,
        current = Math.floor(ratio * amountToRotate);
    if (ratio > 1) {
      clearInterval(myTimer);
      return;
    }
    $(this).css({
      '-webkit-transform': 'rotateX(' + current + 'deg)',
      '-moz-transform': 'rotateX(' + current + 'deg)',
      'transform': 'rotateX(' + current + 'deg)'
    });
  }.bind(this), updatePerMs);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<div id='test'>Testing cool stuff! Please click me!</div>

Collectives™ on Stack Overflow

Changing a CSS Animation using jQuery

1 Answer 1

If you want to be able to animate anything via CSS transitions:

If you only ever want to change transform:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

If you want to be able to animate anything via CSS transitions:

If you only ever want to change transform:

Comments

Your Answer

Sign up or log in

Post as a guest

Related