SuperAPI AI 工具集

anim-bounceoutup

设计与创作

查看项目

更新于 10-16 10:35

技能介绍

用途

anim-bounceoutup 是一个“向上弹跳退出”的 CSS 关键帧动画,来源于 Animate.css(Hippocratic License 2.1,© Daniel Eden),是 motion-anything 项目的一部分。它提供一种快速、即插即用的元素退出动画,无需编写 JavaScript。

主要能力

  • 提供名为 bounceOutUp 的 CSS 类,为元素添加向上弹跳的退出动画效果。
  • 纯 CSS 实现,不需要 JS。
  • 尊重 prefers-reduced-motion:当用户偏好减少动态效果时,该动画会被禁用。

使用方式

  1. 复制 bounceOutUp.css 文件。
  2. 为需要动画的元素添加 bounceOutUp 类,并设置 animation-duration。

适用场景

适合需要快速添加退出动画的界面元素,例如元素移除、关闭或消失时的视觉过渡。

限制与注意事项

  • 官方建议保持克制:不应同时用于大量元素,也不应用于必读内容。
  • 使用时需按 Hippocratic-2.1 许可注明 Animate.css 出处。