CODEWITHSUNDEEP
csscss-transitionscss-animationscss-transforms
Baraneedharan
Baraneedharan

Reputation: 93

CSS animation flickers on transform: translate3d along with width

I have a tab based component, in which the active tab has an underline which animate between tabs. The underline is a seperate div whose width and position will be calculated dynamically . Instead of position absolute I am using translate3d. 

.active-bar {
    transition: all 0.3s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

This bar has the below animation calculated dynamically. 

transform: translate3d(463.484px, 0px, 0px);
width: 32px;

to 

transform: translate3d(20px, 0px, 0px);
width: 254px;

But there is a flicker which I see at times but not always. What is the solution I need to use to avoid the flicker.

Upvotes: 1

Views: 1405

Answers (1)

vals
vals

Reputation: 64164

In order to make the transition smoother (and less CPU dependent) , use only a transform, and a fixed width. Change this dynamic style :

transform: translate3d(463.484px, 0px, 0px);
width: 32px;

to 

width: 100px;   /* fixed in the element */

and the dynamic part (that will get a width of 32px)

transform: translate3d(463.484px, 0px, 0px) scaleX(0.32);

Upvotes: 2

Related Questions