CODEWITHSUNDEEP
csscss-transitions
Sergey Khmelevskoy
Sergey Khmelevskoy

Reputation: 2544

Css transition-property: transform only?

I would like to animate sidebar with CSS transition

.site-config
  flex: 0 1 0
  overflow: hidden
  transform: translateX(100%)
  transition: all .4s ease-in
  &.active
    flex: 2 1 40%
    transform: translateX(0)

It works well, but because flex is also under transition, it slows down appearance and causes other performance issues.

Eventually, I tried transition: transform .5s ease but it's not working.

Update

Currently transition: transform works, but quite unepected from time to time. Short video reference http://screencast-o-matic.com/watch/cDlDYKQZCY

Upvotes: 1

Views: 224

Answers (1)

Wild Beard
Wild Beard

Reputation: 2927

As discussed in the comments you should try to avoid using transition: all as it can slow down performance. Try to be as specific as possible with your transitions.

Also, move your transition from 2D to 3D by using translate3d(x,y,z) instead of translateX(x) to make use of hardware acceleration when enabled/available.

Upvotes: 2

Related Questions