I created a custom-button on my UI using the fan icon, which spins when it is ON. However, the fan spins backwards. So, I looked a little deeper and found the code for the rotation effect (spin) at about line 1302 in the JS Lovelace resource in my www folder, and added “reverse” to the CSS. The lines now look like this:
[rotating] {
-webkit-animation: rotating 2s linear infinite reverse;
-moz-animation: rotating 2s linear infinite reverse;
-ms-animation: rotating 2s linear infinite reverse;
-o-animation: rotating 2s linear infinite reverse;
animation: rotating 2s linear infinite reverse;
}
and it works beautifully. But what’s interesting is that the iOS mobile app still shows it spinning the wrong way! How can that be? As I understand it, The iOS app should be using the same JS file located on my host. Even a refresh and updating the app didn’t help. Maybe the browser in the app doesn’t support the ‘reverse’ CSS option? I even updated the resource in Lovelace on the iPhone, thinking maybe it had cached the JS file somewhere. Maybe I’m missing something, but would appreciate any insight into what might be happening here. Thanks.