CSS Animations

Animations can make your website look amazing and give professional touch. Animations can be done in 3 ways.

transition property - e.g. We can transition transform/opacity/width... properties
using keyframes and animation property

Transition example

Follow 2 simple steps to add animation using transition property.

Create a block type element with transition property and specify what properties will be transitioned.
Add css rule specifying new property values. e.g. on mouse hover, you can specify different color. So if existing color is blue and on hover, you mentioned black then color will be transitioned from blue to black.


transition: property duration timing-function delay|initial|inherit;
transition: color 2s ease-in 2s
transition: transform 2s ease-in 2s
transition: color 2s ease-in 2s, width 2s ease-out 1s

In below example, + will be rotated in 45 degree angle after we mouse hover it.


<div className='x' style={{fontSize:'25px', width:'30px',height:'30px',transition:'transform .5s'}}>+</div>


div.x:hover{
    transform: rotate(45deg);
  }

Please note that Inline elements like span can not be rotated.

Using keyframes

Animation using keyframes has been in use in all major video editors like Adobe after effects. Similar concept is also used in css as well. There are 2 steps to add animation using keyframes.

Specify keyframes
Apply those keyframes to element using animation property

Here is an example that demonstrate the animation using keyframes.

This box background color will change from black to green in 2 seconds and this will happen in loop


<!DOCTYPE html>
<html>
<head>
<style> 


@keyframes coloranimation {
    from {background: black;}
    to {background: green;}
  }

div {
  width: 200px;
  height: 200px;
  background: black;
  animation: coloranimation 2s infinite;
}

</style>
</head>
<body>

<div>This box background color will change from black to green in 2 seconds and this will happen in loop</div>

</body>
</html>

As you can see in the example, first we specified start and end keyframes for background property values. and then applied this animation to div element.

Web development and Automation testing

solutions delivered!!

Basics

Advanced

Miscellaneous

CSS Animations

Transition example

Using keyframes