CSS Animations

This is a collection of nice and interesting CSS animations and hover effects that I started collecting after taking a course from Udemy.

The idea of this website is to keep all the effects in one place and in a way that it is easy to get the code and reuse it in a different place. This is why you see this structure of each page, where each type of animation or effect goes one after another in a clear order and with a clear naming, so everyone is able to just copy-paste the HTML and corresponding CSS from this project and it magically works in another project too. And even if it requires some changes of the CSS - they are super minor and simple.

For example, imagine you see this effect on the "Hover Buttons" page and you want to add it into your project:

Then you just need to find the corresponding html in the pages/hovers-buttons.html file, corresponding css in the css/hovers-buttons.css and copy them to your project. In this case they will look like this:

The code that needs to be copied is only the code of the button (<button class="button hover-12"> Hover me </button>) and the whole code for the css in the section. With this, effect should start magically working in your project too.

I want to collect here as many interesting effects as possible so if you know some - you are welcome to contribute. But please, try to keep the same approach and the same structure of the code. Thank you in advance! :)