DEV Community

Cover image for Head start with CSS Transitions and Transform
Dany Paredes
Dany Paredes

Posted on

Head start with CSS Transitions and Transform

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
Enter fullscreen mode Exit fullscreen mode
  • transition-duration: set time spend between them.
transition-duration: 0.6s, 
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)