---
title: "How to use transitions and transform in CSS"
date: "2020-12-27"
slug: "how-to-use-transitions-and-transform-in-css"
author: "Dany Paredes"
canonical: "https://danywalls.com/how-to-use-transitions-and-transform-in-css"
description: "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:\ntransition-property: set which property we want t..."
---

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:
```css
transition-property: width, height
```

- `transition-duration`: set time spend between them. 
```css
transition-duration: 0.6s, 
```
On my example 2 boxes one with transition over change his properties on hover smoothed and other not.

[JSFiddle Example](https://jsfiddle.net/danywalls4/kfdmo8q6/43/)

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.

[JSFiddle Example](https://jsfiddle.net/danywalls4/kfdmo8q6/14)

## 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.

```css
main:hover {
	transform: rotate(65deg);
	border: 8px solid red;
	background-color: yellow;
}
```
[JSFiddle Example](https://jsfiddle.net/danywalls4/kfdmo8q6/28)

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:
```css
transform: scale(4) translate(50px, 50px) rotate(90deg);
```
[JSFiddle Example](https://jsfiddle.net/danywalls4/kfdmo8q6/37)

If you want to read more about transform feel free to check the full list in [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform).

# 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!