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%;
}
`

• Home

• About

• Clients

• Contact

Lorem ipsum

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.

StackExchange Code Review Q#58488, answer score: 6