I have a requirement to rotate a div and stop at a particular position ( The value will be recieved from server).
I tried native JS to rotate and stop but its eating up my CPU big time.
I can rotate with CSS animation but I need to create a class which will dynamically describe where to stop the animation. Something like
@-webkit-keyframes spinIt {
100% {
-webkit-transform: rotate(A_DYNAMIC_VALUE);
}
}
@-moz-keyframes spinIt {
100% {
-webkit-transform: rotate(A_DYNAMIC_VALUE);
}
}
Here is one reference
Thanks in Advance
well i don't think it is easy to create dynamic @keyframes they are inflexible because they must be hard-coded.
Transitions are a little easier to work with, as they can gracefully respond to any CSS changes performed by JavaScript.
However, the complexity that CSS transitions can give you is pretty limited — an animation with multiple steps is difficult to achieve.
This is a problem that CSS @keyframe animations are meant to solve, but they don’t offer the level of dynamic responsiveness that transitions do.
but these links might help you
Link1 : a tool that generates a @-webkit-keyframe animation with many tiny steps. This opens the door to an unlimited selection of easing formula.
I guess this solution will definitely work for you. Its is used for dynamic keyframes