Fix HTML/CSS Animations performance - html

Question

I have made a HTML page with css animation and transitions
<div class="container-fluid" id="team">
<div class="row first">
<div class="wrapper"></div>
</div>
<div class="row second">
<div class="wrapper"></div>
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.0.name}}</h2>
<h5>{{team.0.position}}</h5>
<p>{{team.0.description}}</p>
Learn more about {{team.0.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.6.name}}</h2>
<h5>{{team.6.position}}</h5>
<p>{{team.6.description}}</p>
Learn more about {{team.6.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper"></div>
</div>
<div class="row third">
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.3.name}}</h2>
<h5>{{team.3.position}}</h5>
<p>{{team.3.description}}</p>
Learn more about {{team.3.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.2.name}}</h2>
<h5>{{team.2.position}}</h5>
<p>{{team.2.description}}</p>
Learn more about {{team.2.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.4.name}}</h2>
<h5>{{team.4.position}}</h5>
<p>{{team.4.description}}</p>
Learn more about {{team.4.firstName}}
</div>
</div>
<img src="">
</div>
</div>
<div class="row fourth">
<div class="wrapper"></div>
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.5.name}}</h2>
<h5>{{team.5.position}}</h5>
<p>{{team.5.description}}</p>
Learn more about {{team.5.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.1.name}}</h2>
<h5>{{team.1.position}}</h5>
<p>{{team.1.description}}</p>
Learn more about {{team.1.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper"></div>
</div>
<div class="row fifth">
<div class="wrapper"></div>
<div class="wrapper join">
<a href="">
<span>+ Join</span>
</a>
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.7.name}}</h2>
<h5>{{team.7.position}}</h5>
<p>{{team.7.description}}</p>
Learn more about {{team.7.firstName}}
</div>
</div>
<img src="">
</div>
</div>
<div class="row sixth">
<div class="wrapper"></div>
<div class="wrapper blank"></div>
<div class="wrapper"></div>
</div>
<div class="row seventh">
<div class="wrapper"></div>
<div class="wrapper"></div>
</div>
Full working version is avaliable here: http://jsfiddle.net/xs4mm5jd/
As you can see it works fine and animations is fast and smooth.
However, when I added some images: http://jsfiddle.net/xs4mm5jd/1/ animation is glichy. Is there any solution to speed up the performance?

Answer 1

Even though I don't see bad performance in your fiddle, you can trigger hardware acceleration when animating.
Some people use a sort of hack applying either transform: translateZ(0); or transform: translate3d(0, 0, 0); to the animated elements.
Here you have a fiddle to test if you see any performance gain: http://jsfiddle.net/gleezer/xs4mm5jd/3/
Here's an article about it.
A second, newer (and probably better) alternative is to use the will-change property in your CSS, for example: will-change: transform;
Read more about it here.