CSS3 storing current animation values


i have a div that is doing a rotation animation as such :

@-webkit-keyframes animateCamera {
    from {-webkit-transform: translateZ(300px) rotateY(0deg);}
    to {-webkit-transform: translateZ(300px) rotateY(360deg);}}

what I want to happen is that when I trigger an event (let us say a mouseclick), I want to store in a variable the current rotateY as of the animation. For example, if the click event is triggered while the animation is at around 140deg, I want that 140 degrees stored in a variable. Does anybody know how to return the current rotateY value? tnx!

Problem courtesy of: AJ Naidas


I would wager your access the current rotation value like any other css value.


var item = document.getElementById["yourId"];
var currentValueForAttribute = item.style.-attribute here-;
Solution courtesy of: kontur


To get any css values you can call getComputedStyle method of window and pass the animated element to it:

var animatedEl = document.getElementById('#myAnimatedEl');
var styles = window.getComputedStyle(animatedEl);
var currentTransform = styles.getPropertyCSSValue('-webkit-transform').cssText;

The currentTransform will be a transformation matrix from which you need to calculate your values.

Here's a jsfiddle of how this works.

Discussion courtesy of: Spadar Shut

This recipe can be found in it's original form on Stack Over Flow.