Using Percentage or Transform

HTML & CSS
1

Which is better to use here?

Percentage: https://jsfiddle.net/j0oad9ce/2/

.container:hover .door-left {
  left: -50%;
}

.container:hover .door-right {
  left: 100%;
}

vs.

Transform translate: https://jsfiddle.net/j0oad9ce/1/

.container:hover .door-left {
   transform: translateX(-100%);
}

.container:hover .door-right {
 transform: translateX(100%);
}
2

Transforms are always more performant than positioning. They are hardware accelerated and allow for smoother movement as they don’t cause reflow.

4 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.