设置动画

Slidde.co 允许您轻松地将标准 CSS 关键帧动画应用到您的网页元素。以下是帮助您入门的分步指南。

侧边栏中的动画选项

1. 选择一个元素：点击页面上的任意元素。
2. 打开 动画 模态框：在右侧边栏，滚动到底部，您会找到 动画 选项。点击它以打开一个模态窗口。

使用预设动画

• 从预设开始：我们建议从预设动画开始，您可以根据需要进行修改。
• 查找更多预设：您可以在 Animate.css 找到预设动画列表。如果您需要特定的动画，请告诉我们，我们可以将其添加到列表中。

自定义动画

动画模态框简化了设置 CSS 关键帧动画的过程，提供了一个低代码界面，即使您不熟悉编码也可以使用。

关键帧动画是您为某些百分比定义 CSS 属性的地方。浏览器会为您处理过渡。

例如，如果您有一个持续时间为 4 秒的关键帧动画。

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

对象将向下移动 20px 持续 2 秒，然后向上移动 20px 回到其原始位置持续 2 秒。

如果您遇到任何问题或想了解更多关于关键帧动画的信息：

• 在线搜索：在 Google 上搜索您的具体问题；有很多示例和资源可用。
• CSS 关键帧教程：参考官方 MDN 上的 CSS 关键帧指南 以获取全面的信息。

动画子元素

您可以通过将 Targets 设置为 &>* 来定位根元素的子元素。

交错延迟

如果将延迟更改为以下值，将应用交错效果。

targets: &>*
delay: anime.stagger(100) // 每个元素增加100毫秒的延迟。

targets: &>*
delay: anime.stagger(100, {start: 500}) // 延迟从500毫秒开始，然后每个元素增加100毫秒。

更多示例请查看这里 交错基础

使用 CSS animation 属性

一个简单的 CSS 动画 始终可用于 自定义样式 中的所有元素。但您可能需要为该特定的 CSS 规则启用 在画布中禁用，以便在编辑器中更轻松地进行编辑。