八个解决你80%需求的CSS动画库

CSS动画是提高网页视觉吸引力的强大工具。以下是八个CSS动画库，它们可以帮助你创建80%的常见需求。

1. Animate.css

   Animate.css 是一个用CSS编写的动画库，非常受欢迎。它提供了一系列预定义的动画，可以通过简单的类添加到HTML元素上。

<link rel="stylesheet" href="animate.min.css">
<div class="animate__animated animate__bounce">我会跳动!</div>

2. Magic.css

   Magic.css 是一个轻量级的CSS库，提供了一系列的动画效果。

<link rel="stylesheet" href="magic.min.css">
<div class="m-bounce">我会跳动!</div>

3. Hover.css

   Hover.css 提供了一系列的CSS动画，可以应用在链接、按钮、图片等元素上。

<link rel="stylesheet" href="hover.min.css">
<button class="hover-pulse">按我!</button>

4. Move.js

   Move.js 是一个轻量级的JavaScript库，用于创建平滑的CSS动画。

<link rel="stylesheet" href="move.min.css">
<script src="move.min.js"></script>
<div id="box"></div>
<script>
  new Move(document.getElementById('box'))
    .rotate(45)
    .execute();
</script>

5. WOW.js

   WOW.js 是一个轻量级的JavaScript库，用于创建滚动时的动画效果。

<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
<script>
  new WOW().init();
</script>
<div class="wow slideInLeft">我会滚动进入!</div>

6. Aos.js

   Aos.js 是一个轻量级的JavaScript库，用于创建滚动动画。

<link rel="stylesheet" href="aos.css">
<script src="aos.js"></script>
<script>
  AOS.init();
</script>
<div class="aos-animate">我会有动画!</div>

7. Velocity.js

   Velocity.js 是一个功能强大的JavaScript动画库，类似于jQuery的$.animate()方法。

<script src="velocity.min.js"></script>
<div id="box"></div>
<script>
  $("#box").velocity({ width: 100 }, 1000);
</script>

8. Typed.js

   Typed.js 是一个简单的JavaScript库，用于创建打字机效果。

<script src="typed.min.js"></script>
<script>
  var typed = new Typed('#typed', {
    strings: ['这是打字机效果!'],
    typeSpeed: 100
  });
</script>
<span id="typed"></span>

这些库提供了各种各样的动画效果，可以满足大部分的网页设计需求。你可以根据自己的需求选择合适的库，并且可以在它们的官方文档中找到更多的使用方法和定制动画。