CSS3 transitions performance enhancement
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.