In this HTML example, there are two animated pictures - one background and the other an object. Despite using scale and rotate animations, the performance is choppy on full HD monitors, especially in Firefox where it runs at about 20 fps.
Initially, jQuery was used for animation but to optimize performance, CSS was chosen instead. However, the result is still not perfect. To replicate the issue, view the animation in full screen mode. How can this be improved?
.html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #121212;
}
.maincontainer {
width: 100%;
padding-bottom: 100%;
position: fixed;
overflow: hidden;
}
// Remaining CSS code omitted for brevity
<div class="maincontainer">
<div id="bg2" class="bg2">
<div id="bg" class="bg animate animate-bg">
<div class="rain"></div>
<div class="drops"></div>
</div>
</div>
<div id="eagle">
<div class="eagle animate-eagle">
</div>
</div>
</div>The mentioned duplicate question doesn't address the current problem as I don't see how canvas can solve it.