While playing a full-screen HTML5 video and trying to add text with opacity animations, I encountered an issue. The video was encoded at minimum quality for optimal performance, and when played alone, it was very smooth. However, once I added the text with a simple opacity animation (going from 0 to 1), the video started freezing.
I'm not entirely convinced that the problem lies with the opacity, as I came across an article addressing this:
Opacity animations are always accelerated. Despite some opinions claiming that opacity transitions and animations harm performance, that's actually false. Opacity changes are sent to the GPU by default, similar to 3D transforms. In fact, according to Paul Irish (referenced in the YouTube link below), opacity is one of the most efficient CSS properties.
Has anyone else experienced this issue before?
#video{
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}