CSS transforms VS transitions

Question

What are the key differences between CSS transformations and transitions?

Both of those are used to change current shape/state of an object. (you can do pretty animations with JS etc..)

But it's still not clear for me which one to use where and for what.

Solution 1

They're completely different things.

Transitions:

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

Transforms:

CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.

Solution 2

transition and transform are separate CSS properties, but you can supply transform to transition to "animate" a transformation.

---

transition

The CSS transition property listens for changes to specified properties (background-color, width, height, etc.) over time.

transition Property Syntax:

selector {
    transtion: [property-name] [duration] [timing-function] [delay]
}

For example, the below styles will change the color of a div's background to orange over a period of 1 second upon hover.

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: background-color 1s;
  /* timing function and delay not specified */
}
div:hover {
  background-color: orange;
}

<div></div>

---

transform

The CSS transform property rotates/scales/skews an element over the X,Y, or Z axes. Its behavior does not relate to transition. Simply put, on page load, the element will just appear rotated/skewed/scaled.

Now if you wanted the rotating/skewing/scaling to happen, say when a user hovered over the element, you would need to "transition" the "transformation".

Here's how: since the transition property's functionality is to listen to changes in other css properties, you can actually supply transform as an argument to transition and "animate" the transformation based on desired trigger (for example, a hover action).

transform Property Syntax

select {
    transform: [rotate] [skew] [scale] [translate] [perspective]
}

For example, the below styles will rotate a div over a period of 1 second upon hover.

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: transform 1s;
  /* timing function and delay not specified */
}
div:hover {
  transform: rotate(30deg);
}

<div></div>

Comments

[rinchik]

Oh... i see thank you :)

[makeitmorehuman]

Are there any performance benefits in using transform over transitions in terms of the mechanism each uses for tendering?

[Explosion Pills]

transform and transition do different things -- they can't replace one another, so it doesn't necessarily make sense to compare their performance.

[Jayesh Bhoot]

perfect one-line explanations!

[Matt Hughes]

They are different but they both can be used to accomplish the same thing for moving elements across a 2d plane. However, there are performance differences between the two: paulirish.com/2012/…

[Tomasz Mularczyk]

transformation can also have transition effect. What I mean is something like: transition: transformation 1s linear;

[thdoan]

Note that the Paul Irish article is outdated. In 2020 using a current generation business laptop, animations using transition top/left is noticeably smoother than transform translate() in the latest stable version of Chrome (80.0.3987.122 as of this writing). YMMV.

[simhumileco]

The best answer IMO.