How can i get in jQuery the current state of an infinite animation in CSS

Question

<section class="viewport" id="content">
    <div class="cube rotate1 " id="test">
        <div class="front" id="ajax-container"></div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</section>
<button type="button" class="test">Click Me!</button>

jQuery:

$(".test").on('click',function(e){
    $(".cube").addClass('paused');
});

Demo

How can i get the current position of the cube when i pause the animation?
I need its current position(rotatex,rotatey) in jQuery to do stuff from that position.

UPDATED:

i have tried this script :

function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform")    ||
obj.css("-ms-transform")     ||
obj.css("-o-transform")      ||
obj.css("transform");
if(matrix !== 'none') {
    var values = matrix.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return (angle < 0) ? angle + 360 : angle;

}

but i get numbers under 180 degrees. It is not working properly.

Answer 1

You can use an animationstart listener on the element, and from there calculate the rotations based on the time expired since the last animation start. You know animation lasts 3 seconds, so the calculation is trivial.

Using animation events

Here's your fiddle with the calculation: https://jsfiddle.net/yzrq367s/2/

And another with live state output: https://jsfiddle.net/yzrq367s/3/

Using animationiteration (wait for one cycle for it to start): https://jsfiddle.net/yzrq367s/6/

---

$(".test").on('click',function(e){
        $(".cube").addClass('paused');
        clearInterval(int);
        $('p').text(((new Date().getTime() - animStart.getTime()) % 3000 / 3000 * 360).toFixed(2) + " degrees");
        $('.test').hide();
  });
  
  $(".cube").get(0).addEventListener('animationstart', function(){
  	animStart = new Date();
    if(!int)
    	int = setInterval(function(){
  			$('p').text(((new Date().getTime() - animStart.getTime()) % 3000 / 3000 * 360).toFixed(2));
  		}, 10)
  })
  
var animStart;
var int;
$(".cube").addClass('running');

.menu {position: absolute; right: 20px; top: 20px; text-align: right}
.viewport {
  width: 400px;
  height: 400px;
  margin-top: 50px;
  position: relative;
  perspective-origin: 50% 50%;
  perspective: 1000px;
}

.cube {
  margin: auto;
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
}

.cube div {
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-color: #000;
  border: solid 1px #eee;
  color: #fff;
  font: 10px arial;
  transition: transform 0.2s ease-in;
}

.front {
  transform: translateZ(100px);
  overflow: hidden;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
}

@keyframes rotate1 {
  to {
    transform: rotateX(90deg) rotateY(90deg);
  }
}

@keyframes rotate2 {
  to {
    transform: rotateX(180deg) rotateY(180deg);
  }
}

@keyframes rotate3 {
  to {
    transform: rotateX(270deg) rotateY(270deg);
  }
}

@keyframes rotate4 {
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube.running {
  animation: rotate1 3s, rotate2 3s, rotate3 3s, rotate4 3s infinite linear;
  animation-fill-mode: forwards;
}

.paused {
  animation-play-state: paused !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="viewport" id="content">
  <div class="cube" id="test">

    <div class="front" id="ajax-container"></div>
    <div class="back"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>

  </div>


</section>
<div class="menu">
  <button type="button" class="test">Click Me!</button>
  <p>Waiting for the animation to start</p>
</div>