SuperAPI AI 工具集

anim-slideoutdown

设计与创作

查看项目

更新于 10-16 10:35

技能介绍

用途

anim-slideoutdown 是一个纯 CSS 的退场(exit)动画,让元素向下滑出。它属于 Animate.css 的关键帧动画系列,是 motion-anything 项目的一部分。该动画无需 JavaScript 即可使用。

主要能力

  • 提供名为 slideOutDown 的 CSS 关键帧动画,表现为元素向下滑出。
  • 纯 CSS 实现,不需要引入 JavaScript。
  • 遵循 prefers-reduced-motion:在该偏好开启时动画会被禁用。

使用方式

根据资料,使用步骤如下:

  1. 复制 slideOutDown.css。
  2. 为目标元素添加 slideOutDown 类,并设置 animation-duration。

资料中未提供更多安装命令、CDN 地址或具体代码示例。

适用场景

  • 需要快速、即插即用的 CSS 退场动画时。

限制与注意事项

  • 克制使用:不宜在同一时间对大量元素使用,也不宜用于必须阅读的内容。
  • 资料未说明其对布局、性能或与其他动画的组合行为。

无障碍与许可

  • prefers-reduced-motion:启用时动画被禁用。
  • 许可:Hippocratic License 2.1,版权归 Daniel Eden,使用时需署名 Animate.css(Hippocratic-2.1)。

暂未提供的信息

关于具体的浏览器兼容性范围、文件体积、版本号、下载或安装命令等,资料中暂未提供。