Css Transition Item In And Out Of Flexbox Smooth Animation

I'm building basic navigation for a website, and the graphical/animated functionality that I would like is this: 1: When in the 'HOME' state, the site logo/icon is large and center

Solution 1:

The animation is "jittery" because you are animating too many properties at once and they affect more than Paint and Composite layers.

If you find the above statement vague, please refer to these two articles:

• Rendering Performance from Google
• High Performance Animations.

The generally accepted solution for this type of animations is to have one element in DOM for each of the two animation states. They should both be positioned (any position value other than static will do). You'll use transform to animate the starting state element towards the position and size of the target state element. By getting .getBoundingClientRect() on each, you can determine the required transforms needed to make the exact transition).

By far, the biggest advantage of this method is that the element being animated remains at the same position in document flow and, by not being resized or moved, it doesn't trigger reflow on subsequent DOM elements or parents. Only its rendered projection is moved.

Once the animation ends, you toggle both elements's visibility and remove the transforms from the one you just animated (now hidden - you want to set animation-duration:0s; for this change), in order to reset the rendered projection back to its normal place in DOM.