3 ms·
Here's how I've achieved that cheesy 90s spinning effect in the past: @keyframes spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1
by JonnieCache 11y ago
Here's how I've achieved that cheesy 90s spinning effect in the past:
@keyframes spin {
0% { transform: scaleX(1); }
50% { transform: scaleX(-1); }
100% { transform: scaleX(1); }
}
.spin {
animation: spin ease-in-out 6s infinite;
}
All done on the GPU as far as I can tell...
The only satisfactory way to do web animation I've found is to do it 100% in css by toggling classes. As soon as the JS interpreter gets involved in any way, things go south.
- nkozyra 11y agoRight, but the point is even GPU-optimized animations in the browser seem to tax the CPU. It's something I've experienced as well.
- JonnieCache 11y agoEven when they're controlled/computed/whatever purely through css as above? Maybe I've just been lucky in my limited experience with looping them infinitely like this.