Simple CSS Animation ( Animating a button )

A simple CSS animation can draw your visitors attention to some important part of your interface. You can also use these animations to make your website look more interesting!

Starting off, I will not go through the button CSS but here is the design used.

Now, to use a CSS animation we must first specify our keyframes for the animation.

One simple example of this could be

@keyframes example {
  40% {background-color: green;}
  80% {background-color: red;}
}

In this animation the same CSS for the button style above was used, a animation time of 2 seconds was specified to that button class on hover through following

.btn:hover {
  animation: example 2s;
}

This means that at 0% of the animation the background of the button is white which was specified at the .btn class. At 40% of 2 seconds it will be changed gradually from White to Green and then from 40% - 80% change from Green to Red, then return to the button specified background color.

Using these keyframes we can do a lot of various things with the button such as making it shake by

Which provides this following effect when hovering the button.

In this example it simply moves the button a few pixels gradually between each keyframe.

I should note that if you don't want the animation for something to trigger on hover, instead trigger after a certain time you can use

animation-delay: s

and enter how many seconds after the page loads you want to run the animation.

Now after you've read this far you might be curious about what other properties you can animate. This following article will show you a list of properties that you can use to animate.

Firefox MDN

Feel free to ask anything if you have any questions!