transform - CSS rotate relative to current position -
I have a spinning wheel graphic set to rotate 0 to 360 degrees infinitely.
I should then spin that element in a reverse direction instead of each time with a certain amount, instead of a particular position rather than a position of 0 degree.
Put another way, what happens now:
wheel is on 5 degree wheel reset wheel 5 degrees back 0 wheel 270 degree wheel reset wheel 270 degree back Runs 0 to
And what I want is a continuous movement:
Wheel is reset to 5 degree wheel Wheel takes 180 degrees back Wheel 270 degree wheel reset is taken 180 degrees back
Any suggestions?
We are using the BornBono.OSS library so that the SASS code looks like this:
. Spin {@ animation included (3.0 spin linear infinite); } Include {key} (key) {{Add to {change (rotate (0deg)); } {@ Change (rotate (360 degrees)); }}. Include spin-back {@ animation (spin back 3.0 linear infinite); } Include @keyframes (spin back) {change (rotate (0deg)); }}
Toggle to click through class spin and spin-back script.
Comments
Post a Comment