Another good way to add great effects with CSS is using transitions, it helps to transform CSS properties from one to other smoothly with duration between them.

The two keys properties to get it are:

• transition-property: set which property we want to add the transitions for example width, height or border.

The transition property can mix up more than one property like:

transition-property: width, height

• transition-duration: set time spend between them.

transition-duration: 0.6s, 

On my example 2 boxes one with transition over change his properties on hover smoothed and other not.

We can add 2 optional parameters transition-delay it set time to start and transition-timing-function set speed form start or end, for example, the animation wait 2 second to start.

By default, is easy but you can set other types like ease-in it has a slow start or linear it set the same speed from start to end.

transform

The transform help us to change position, size and shape of elements and can be mixed with transition to get great effects.

The transform accepts other functions like to translate, rotate, scale.

Like other CSS properties like width and height, we can apply transition on the transform to get a great effects:

My first example is with transform using rotate, it will move the element on hover 65 deg.

main:hover {
    transform: rotate(65deg);
    border: 8px solid red;
    background-color: yellow;
}

Transform accept other options like:

• translate(x , y) move elements using the coordinates x and y. -rotate: rotate the element using deg like example rotateY(180deg) or rotateX(180deg);

-scale: scale an element between x and y.

And we can use all of them together like:

transform: scale(4) translate(50px, 50px) rotate(90deg);

If you want to read more about transform feel free to check the full list in MDN.

That's it!

Hopefully, that will give you a bit of help with Transitions and Transform in CSS. If you enjoyed this post, share it!