CSS Animations

Transitions

One of the most used style-enchancing things in websites, like this one below:

You can make the element do other things aswell, like move, fade out whatever more.

Animations with Keyframes

Making content move with the "@keyframes" function is a way to make an element animated. Randomly, here we have a spinning circle, which is good for loading states:

With this animator, you define, when the animation starts and ends with the power of using percentage (20%{} 40%{} 80%{}) for instance.

Shadow/Filter Transforms

This method is used by various sites, because its easy to make and looks cool (at least in my opinion):

Its possible to put multiple values into one line on transform and the filter() function - limitless opportunities to design your animations/hovers/clicks etc.

Using multiple percentages in @keyframes

When using the "@keyframes" function, you can put numerous percentage points in one line by seperating them with a comma. This is a bell icon animation here:

In the "@keyframes pulse{}" function there is the line "0%, 100% { box-shadow: 0 0 8px rgba(231, 76, 60, 0.7); }", which has 2 percentage points. So the state starts at 0% and while its going to 50%, its changing the state to something else (like the color change here), and after the 50%, it goes back to normal.