带有CSS动画的SVG预加载器，可在每次加载页面时随机化

Question

所以我做了一个svg徽标预加载器，也为它做了一些css动画。但我的主要问题是如何让预加载器在刷新/新页面加载时使用javascript加载不同的动画。例如，在一个页面上加载徽标应该使用反弹动画，在页面重新加载或在另一个选项卡上打开预加载器以使用我制作的旋转动画，等等。

​

var strings = [
 	'animation1.',
    'animation2.',
    'animation3.'
];

var rand = strings[Math.floor(Math.random() * strings.length)];
document.getElementById('loading-animation').innerHTML = rand;

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #ddd;
    padding-top: 200px;
}
.svg {
    display: block;
    width: 80px;
    height: 80px;
    background: #aaa;
    margin: 10px auto;
}

.animation1 {
  just an example
}

.animation2 {
  just an example
}

.animation2 {
  just an example
}

<div id="container" class='loading' >
     <div id='loading-animation' class='loading-animation'>Processing</div>
     <svg>just an example svg in inserted in the html, no external src link to it</svg>
</div>

​

我非常确定.innerHTML不应该出现在那里，因为javascript文件将被外部链接到head部分。我知道我没有链接所有的代码，只是因为这里粘贴的代码太多了，所以我做了一个小例子，希望我能让自己明白。谢谢。

Answer 1

可以使用JavaScript将CSS类随机分配给要设置动画效果的元素。下面是一个例子。

​

var animationClasses = [
  'animation1',
  'animation2',
  'animation3'
];

var choosenAnimation = animationClasses[~~(Math.random() * animationClasses.length)];

document.getElementById('elementToAnimate').classList.add(choosenAnimation);

@keyframes grow {
  0% {
    transform: scale(0);
  }
  
  100% {
    transform: scale(1);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

@keyframes fly-down {
  0% {
    transform: translateY(-100%);
  }
  
  100% {
    transform: translateY(0%);
  }
}

.animation1 {
  width: fit-content;
  animation: grow 1s;
}

.animation2 {
  animation: fade 1s;
}

.animation3 {
  animation: fly-down 1s;
}

<div id="elementToAnimate">This will get a random animation</div>

​

数组animationClasses中的一个随机类被分配给elementToAnimate。每个类都包含用于不同动画的CSS，允许每次使用随机动画。