css动画默认不加载

CSS动画默认不会加载，这是因为它们被定义为初始状态，直到某个事件触发它们。这意味着当您的网页加载时，动画不会自动开始。

另外，如果您在动画代码中使用了关键帧动画，您需要定义动画持续时间和循环次数。否则，动画将保持在其最初的状态。

/* 定义动画 */
@keyframes example {
  0% {transform: translateX(0);}
  100% {transform: translateX(200px);}
}

/* 使用动画 */
.example {
  animation-name: example; /* 指定动画名称 */
  animation-duration: 2s; /* 指定动画持续时间 */
  animation-iteration-count: infinite; /* 指定动画循环次数 */
}

另外，您还可以通过JavaScript触发动画，例如在页面滚动到某个特定位置时。在这种情况下，您可以使用JavaScript添加一个类，该类包含要触发的动画。

// 获取元素
var myElement = document.querySelector('.my-element');

// 在滚动到某个位置时添加类
window.addEventListener('scroll',function() {
  if (window.scrollY > 500) {
    myElement.classList.add('animate');
  } else {
    myElement.classList.remove('animate');
  }
});

总之，要让CSS动画在页面加载时自动完成，您需要定义动画状态、持续时间和循环次数，并使用JavaScript触发动画。