CSS3 transitions performance enhancement I am building a website with heavy CSS3 transitions. The menu is hidden on the left and slides in on hover pushing the main content right. The menu contains transformed elements and has a semi transparent background.

I am concerned about the performance of the animations. When the animation is triggered several times (and also often on the first trigger) the frame rate goes under 30 FPS.

How can I enhance the performance of the animation and have a higher frame rate?

I tried making these animation with jQuery and it is worse.

I made a simple example that has the FPS issue here (hover the envelope icons on the left).

HTML:



body,html,ul,li {margin: 0; padding: 0;}
nav {
  width: 0; height: 100%;
  position: fixed;
  top: 0; left: 0;
  background-color: rgba(255, 145, 0, 0.8);
  -webkit-transition: width .5s ease-out;
  transition: width .5s ease-out;
}
nav:hover {
  width: 40%;
}
ul {
  list-style-type: none;
  position: absolute;
  width: 60%;
  left: 20%;
}
nav li {
  position: relative;
  margin: 0.5em 0;
  padding: 0.5em;
  min-width: 5em;
}
nav li:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: teal;
  z-index: -1;
  opacity: 0;
  -webkit-transform: skewX(30deg);
  -ms-transform: skewX(30deg);
  transform: skewX(30deg);
  -webkit-transition: opacity .5s ease-out;
  transition: opacity .5s ease-out;
}
nav:hover li:before {
  opacity: 1;
}
nav li * {
  vertical-align: middle;
}
nav img {
  height: 2em;
}
nav a {
  opacity: 0;
  -webkit-transition: opacity .5s ease-out;
  transition: opacity .5s ease-out;
}
nav:hover a {
  opacity: 1;
}
/* MAIN */

section {
  width: 60%;
  margin-left: 20%;
  min-height: 100%;
  background: url(http://lorempixel.com/output/nature-q-g-640-480-9.jpg);
  -webkit-transition: margin-left .5s ease-out;
  transition: margin-left .5s ease-out;
}
nav:hover +section {
  margin-left: 30%;
}
&lt;nav role='navigation'&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;span&gt;&lt;img src="http://www.meilleurs-masters.com/images/classement_icon_mobile_mail.png" alt=""/&gt;&lt;/span&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;span&gt;&lt;img src="http://www.meilleurs-masters.com/images/classement_icon_mobile_mail.png" alt=""/&gt;&lt;/span&gt;&lt;a href="#"&gt;About&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;span&gt;&lt;img src="http://www.meilleurs-masters.com/images/classement_icon_mobile_mail.png" alt=""/&gt;&lt;/span&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;span&gt;&lt;img src="http://www.meilleurs-masters.com/images/classement_icon_mobile_mail.png" alt=""/&gt;&lt;/span&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
&lt;section&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta augue vitae bibendum vulputate. Nam sed pulvinar neque. Pellentesque justo neque, aliquet at risus sed, tristique mattis purus. In laoreet diam at porttitor tempor. Vestibulum ante
    ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras in lorem sit amet purus egestas aliquet. Cras dignissim venenatis facilisis. Suspendisse id dui consectetur, lobortis mauris nec, egestas augue. Sed dui sapien, dignissim
    in dui eget, pretium laoreet leo. Phasellus semper faucibus elit eu consequat. Maecenas aliquam nibh sit amet sapien blandit, non sagittis mi vestibulum.&lt;/p&gt;
  ... More content ...
&lt;/section&gt;
I'm pretty new to CSS, but I do have a few notes:


As @Jivings said, the animation worked nicely for me.  No stutter
or anything.
I would use Font Awesome instead of your envelope .png (but keep the PNG as a fallback for cases such as some IE versions not supporting SVG).  Why?  Because now I can scale the envelope infinitely (due to SVG graphics), and customization of the image becomes a whole lot easier (size, color, drop shadow, etc.).
You should give a little bit more space between the envelope picture and the item text.

nav:hover a {
    margin-left: 5%;
    opacity: 1;
}

I think it looks nicer with the picture and text centered.

nav:hover {
    text-align: center;
    width: 40%;
}





JSFiddle with the suggested changes.