Continuously Rotating Element
20 April 2013
Just a quick CSS3 transitions and animations tip today. After cleaning up my dropbox I found some old code of mine implementing a little game in another programming language using OpenGL to draw everything, the code dated back to 2009. I thought I’d rewrite it in JavaScript and render it using CSS/HTML.
The game logic is quite simple, you click on a circle which then rotates 90deg clockwise and if the white pipe get’s connected with surrounding ones, these will rotate the same way.
You can try a live demo here:
If you watch these little circles, after clicking on one, you can see that they rotate continuously. These circles have four states; 0, 90, 180 or 270 degrees rotated clockwise. These states are represented by a CSS selector (in this case a attribute selector).
To create a continous animation between these states always rotating clockwise, I first started using a simple transition like this:
You my notice that everything looks good except the transition between data-state='3' and `data-state=’0’ where the whole circle rotates anticlockwise.
To figure out why this is happening lets look at the angles that are involved in all these transitions:
0 -> 90 -> 180 -> 270 -> 0
And there it is! Between the first three transition the angle is increasing resulting in a clockwise rotation. Only the last transition decreases the angle, and therefor a anticlockwise rotation.
How to solve it?
After asking the #4ae9b8 Team for help, Sara Soueidan suggest to use CSS animations for it.
So I gave it a try:
Woah, this is quite much code, four animations are needed for this to work. At first I thought that it would be possible to omit the 0%{} declaration in @keyframes because setting the animation-fill-mode:forwards should ‘fill in’ the state. But after the state has changed the animation isn’t applied anymore and therefor the animation would start from 0 degree.
This method is working but is far away from usable, even after Hugo Giraudel jumped in and made a SASS mixin for it (he just makes a mixing for everything).
Everything is a Remix!
The first attempt was quite successfull, only the last transition was not working. Let’s mix both techniques:
This looks much better. For the first three state changes CSS transition are used and for the last one a animation from 270 to 360 degree. In this solution there is only the need of one instead of four animations. But there is a problem! This only works in WebKit(/Blink). In Firefox it looks like in the transition only version.
Wrapping it up
For my little game I am currently using the second solution with only animations because that has better browser support. Thanks for reading and you have any ideas on how to improve this please let me know!