Reverse Fan Animation

Is there any way to reverse the direction of the fan spin animation? I know I’m being exceptionally pedantic here, but the fan in my son’s room spins counter clockwise and aesthetically it would be nice if the animation matched.

I tried being smart and setting the height negative in custom css in the hopes that might invert the icon - it does not!

It’s a CSS Animation so you can use Custom CSS and set the 'animation-direction' to 'reverse'.

This would reverse the spin animation for all fan speed icons. .icon.fa-spin { animation-direction: reverse; }

Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with potential future changes to the SharpTools web app.


Edit: There’s a bunch of other interesting CSS snippets in the community maintained CSS Wiki:

[WIKI] Custom CSS snippets, verified on SharpTools

And here’s a tip on how to apply a CSS snippet to just a particular named style that you can choose to apply to one or more tiles rather than all tiles – for example, just your son’s fan rather than on all fans:

How to move text / labels in tiles with CSS - #4 by josh


Thanks Josh. Yes, I’ve been messing with Custom CSS quite a bit but hadn’t found the animation-direction command. That worked perfectly, thank you sir!

1 Like