javascript - CSS "preload"动画

Question

在 CSS 中，我为转换编写了一些肮脏的代码，它加载了 24 个不同的蒙版图像。第一次播放时，加载时有延迟，但如果我有一个 div“预加载”它，即在页面加载时播放它，它似乎被缓存了，因此不会再次延迟，所以我尝试这样做像这样:

<div class='trans' style='z-index:1;height:100%;width:100%;overflow:hidden;visibility:visibile;'/>

这有效，但是，当我尝试使用 display:none 隐藏它时；动画在加载之前不会显示。与可见性相同。有更好的方法吗？

感谢任何帮助。

@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);
}

Answer 1

根据 https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content您可以使用 HTML 元素来预加载图像，由于头部中的元素是阻塞的，请确保在 CSS 之前添加图像这样:

<link rel="preload" href="image.png" as="image">
<link rel="stylesheet" type="text/css" href="theme.css">