结合 CSS 动画使用

Anime.js 和 CSS 动画各有优劣。结合使用可以让动画既有良好性能，又方便管理和复用。

1. 何时使用 CSS 动画

• 简单的过渡和循环动画。
• 需要通过类名控制的状态切换。
• 利用浏览器优化，性能更佳。

2. 何时使用 Anime.js

• 复杂的序列动画和事件控制。
• 动态生成动画参数。
• 需要精确控制动画时序。

3. 结合使用示例

通过 Anime.js 触发 CSS 动画类切换，完成复杂效果。

<div class="box"></div>
<button id="startBtn">开始动画</button>

<style>
  .box {
    width: 100px;
    height: 100px;
    background: #4fc08d;
    border-radius: 10px;
    margin: 20px auto;
    transition: transform 0.5s ease;
  }

  .rotate {
    animation: rotate360 2s linear infinite;
  }

  @keyframes rotate360 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<script>
  const box = document.querySelector('.box');
  const btn = document.getElementById('startBtn');

  btn.addEventListener('click', () => {
    anime({
      targets: box,
      translateY: 100,
      duration: 1000,
      easing: 'easeInOutQuad',
      complete: () => {
        box.classList.add('rotate');
      }
    });
  });
</script>

4. 优势总结

• CSS 动画高效且易管理。
• Anime.js 适合动态控制和复杂时序。
• 结合使用更灵活，提升体验。

代码示例

loading