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%;
}
<nav role='navigation'>
<ul>
<li><span><img src="http://www.meilleurs-masters.com/images/classement_icon_mobile_mail.png" alt=""/></span><a href="#">Home</a>
</li>
<li><span><img src="http://www.meilleurs-masters.com/images/classement_icon_mobile_mail.png" alt=""/></span><a href="#">About</a>
</li>
<li><span><img src="http://www.meilleurs-masters.com/images/classement_icon_mobile_mail.png" alt=""/></span><a href="#">Clients</a>
</li>
<li><span><img src="http://www.meilleurs-masters.com/images/classement_icon_mobile_mail.png" alt=""/></span><a href="#">Contact</a>
</li>
</ul>
</nav>
<section>
<p>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.</p>
... More content ...
</section>