If you are a web developer and you want to give life to your website, then the CSS animation is one of the essential items that you should use. It also enhances the user experience and, as you know, the better the user experience, the higher the satisfied visitors.

So, welcome to this simple CSS animation journey. In this article, we are going to cover the basics of CSS animation and create some simple ones from scratch to see how it is easy to work with CSS animation.

What is the CSS transitions?

Switching styles from one state to another.

Here’s a simple example: Let’s imagine that we want to smoothly change the color of the button when hovering over it as below:

CSS animation transition

<button class=”button”>CSS transition</button>

.button {
 height: 80px;
 width: 300px;
 font-size: 28px;
 color: white;
 border: none;
 background-color: green;
 transition-property: background-color;
 transition-duration: 1000ms;
 cursor: pointer;
}
.button:hover {
 background-color: blue;
}

Transition-property: useto change desired CSS properties when the transition happens.

Transition-duration: the time that animation occurs.

#css-animation #css #web-development #web-design #animation