When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback:
<div class='trans' style='z-index:1;height:100%;width:100%;overflow:hidden;visibility:visibile;'/>
This solution worked well initially. However, I ran into problems when attempting to hide the div using display:none or visibility property as it caused the animation to not display until fully loaded. Is there a more effective approach to handle this situation?
Any assistance on this matter would be greatly appreciated.
@keyframes transit {
0% {
-webkit-mask-image: url('img0.png');
mask-image: url('img0.png');}
4% {
-webkit-mask-image: url('img1.png');
mask-image: url('img1.png');}
8% {
-webkit-mask-image: url('img2.png');
mask-image: url('img2.png');}
...
.trans{
width: 100%;
height: 100%;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-size: cover;
-webkit-mask-size: cover;
mask-repeat: no-repeat;
animation-direction: reverse;
animation: transit 2s;
}
...
function menu(){
$('body').addClass('trans');
setTimeout(function() {
$('body').removeClass('trans');
}, 2000);
}