SuperAPI AI 工具集

anim-zoomoutdown

设计与创作

查看项目

更新于 10-16 10:35

技能介绍

用途

Zoom Out Down 是一个 CSS 关键帧退出动画,用于让元素以缩小并向下移动的方式从界面中退场。它源自 Animate.css(Hippocratic License 2.1,© Daniel Eden),是 motion-anything 项目的一部分,定位为即插即用的动画样式。

主要能力

该动画以纯 CSS 关键帧实现,无需 JavaScript 即可运行。它支持遵循系统的 prefers-reduced-motion 偏好设置,在用户开启减少动态效果的选项时该动画会被禁用。

使用方式

按照资料说明,使用方法分为两步:第一步,复制 zoomOutDown.css 文件;第二步,为目标元素添加 zoomOutDown 类,并设置 animation-duration(动画时长)。

适用场景

适用于需要为元素添加快速离场动画的场景,作为即插即用的 CSS 退出动画使用。

限制

资料中给出的使用克制建议包括:避免同时为大量元素使用该动画,以及不要将其用于必读内容。此外,在 prefers-reduced-motion 启用时该动画会被禁用。

许可与归属

该动画采用 Hippocratic License 2.1 授权,版权归 Daniel Eden 所有,使用时需对 Animate.css 进行署名。