css 动画库

/* 示例代码：使用 CSS 动画库（例如Animate.css） */

/* 引入 Animate.css 库 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

/* 定义一个元素并应用动画 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 使用 Animate.css 提供的 fadeIn 动画效果 */
  animation: fadeIn 2s ease-in-out;
}

/* 自定义动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

解释说明：

• @import：引入了 Animate.css 库，这是一个流行的 CSS 动画库，提供了多种预定义的动画效果。
• .box：定义了一个简单的红色方块，并应用了 fadeIn 动画效果。动画持续时间为 2 秒，使用了 ease-in-out 的缓动函数。
• @keyframes fadeIn：自定义了一个名为 fadeIn 的关键帧动画，从透明度为 0 到透明度为 1。

如果你需要更多动画效果，可以直接参考 Animate.css 文档中的类名并应用到你的 HTML 元素上。