Chrome CSS 3 Transition Not Smooth

Question

Hi working on a site design for a new site and the homepage has some flyup menus using CSS3 transitions.

If you go to --------- and take a look at the \"Some Menu t

Answer 1

You are causing browser reflows, which are expensive and change the layout on each animation step, causing the jerkyness and jitterness.

To work around this, you need to apply absolute positioning to your animated elements, adding this to your CSS will get you started:

.home .main-navigation ul {
  position: relative;
  height: 180px;
}

.home .main-navigation ul li {
  position: absolute;
  display: block;
}

.home .main-navigation ul li:nth-child(1) { left: 0;}
.home .main-navigation ul li:nth-child(2) { left: 25%;}
.home .main-navigation ul li:nth-child(3) { left: 50%;}
.home .main-navigation ul li:nth-child(4) { left: 75%;}

This is just a starting point, you will have to write more CSS in order to correctly display your elements with absolute positioning.