Chrome Css 3 Transition Not Smooth

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 that is nice', 'A

Solution 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-navigationul {
  position: relative;
  height: 180px;
}

.home.main-navigationulli {
  position: absolute;
  display: block;
}

.home.main-navigationulli:nth-child(1) { left: 0;}
.home.main-navigationulli:nth-child(2) { left: 25%;}
.home.main-navigationulli:nth-child(3) { left: 50%;}
.home.main-navigationulli: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.