/!\ NOT MAINTAINED ANYMORE /!\
A few changes might be made from time to time, but this fun project was made to learn about CSS animations. I haven't had any need to update it in the past couple of years.
Testing CSS animations. Rule : no JavaScript because JavaScript is evil (not really).
Not really. Animations and keyframes are fairly understandable.
Each test is a standalone project in the src folder. Each test comes in a separate folder with a CSS folder and sometimes an img folder.
-
infinite_loop_slider : manipulating X axis to move a few pics in a slider
-
spin_to_win : making a loader, inspired by waiting a few minutes on the League of Legends loading page.
-
fb_loader : making an oldschool loader like the one facebook had. I don't know if they still have it since I don't use Facebook anymore.
-
yoyo : a circle that goes down and up. I got the idea this morning when I saw a kid with a yoyo in the metro and honestly it was easier than expected.
-
flip : a circle that flips, like a coin. Add some JS maybe and you can do a nice coin-flip. Head or tail?
-
swag-shadow : have you seen those old movies with logos that has a cool ass shadow? I tried to do that.
-
sonic : a barely recognizable sonic running around a green-hill-themed rounded rectangle
-
barrelroll : a button doing a full rotation when it gets focus (aka pressed) and rotates back when losing it. Should have been a input field spinning when RR or ZZ is entered, but why would CSS care about a dynamic "value" property
-
pingu : FreeCodeCamp has a lot of great HTML & CSS courses. In one of them, you can learn how to make a nice pingu.
I don't know, find a hobby I guess. Those animations are very small project I might re-use one day (or not). You can easily find those online but I found most tutorials boring with unnecessary bullshit where the final result can be pretty simple and straight forward. Please don't translate this chinese text
This repo will allow me to try a few stuff with CSS animations. Don't expect me to do much styling outside the animations since it's like a lab where I test stuff I'll probably need (or not) in the future. You can contribute, if you think you can teach me a few things (which you probably can).