views:

113

answers:

1

Hi everybody,

i am working on a html5 interface wich uses drag and drop. While i am dragging an element, the target gets a css-class, which makes it bidirectionally rotate due to a -webkit-animation.

@-webkit-keyframes pulse {
   0%   { -webkit-transform: rotate(0deg);  }
   25%  { -webkit-transform:rotate(-10deg); }
   75%  { -webkit-transform: rotate(10deg); }
   100% { -webkit-transform: rotate(0deg);  }
  }

.drag
{
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

When I drop the target, I want it to adopt the current state of rotation.

My first thought was to check the css property with jquery and the .css('-webkit-transform') method. But this method just returns 'none'.

So my question: Is there a way to get the current degree value of an element which is rotated via animation?

Thanks so far Hendrik

A: 

I do not believe this is possible. Only keyframe properties are exposed to the DOM.

http://www.w3.org/TR/css3-animations/#animation-events-

(Now, a hacky way to get what you need is to create keyframes for each degree of rotation, so when the drop occurs the animation will stop at the appropriate rotation.)

Michael Mullany