设置动画

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

侧边栏中的动画选项

1. 选择一个元素：点击页面上的任意元素。
2. 打开 动画 模态框：在右侧边栏中，点击 动画 标签按钮，您会找到 动画 选项。点击它以打开一个模态窗口。
3. 从预设开始：我们建议从预设动画开始，您可以稍后根据需要进行修改。您可以点击预设按钮替换为预设。如果您点击按钮中的 加号图标，预设将附加到当前动画中。

自定义动画

动画模态框简化了设置 CSS 关键帧动画的过程，将其转化为低代码界面，即使您不熟悉编码也可以轻松使用。

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

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

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

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

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

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

触发器

此字段控制动画何时播放。

• 元素显示: 这是默认选项。当元素滚动到视图中或包含的部分显示时，动画将被触发 哈希部分
• 元素显示（每次重播）: 与上面相同，但每次元素显示时动画都会重播。
• 页面加载: 页面加载时将触发动画。

目标

通常你不需要设置这个。默认值是 &，表示根元素。

然而，在某些情况下你需要设置它。

• 要为 高级背景 元素设置动画，可以将 目标 设置为 第一个子元素，因为 高级背景 元素总是根元素的第一个子元素。

• 要对所有子元素应用交错延迟。请阅读 Delay & staggering delay 部分以获取更多详细信息。

Delay & staggering delay

如果将 延迟 设置为 1000ms，动画将在等待 1000ms 后播放。

如果将 交错 设置为 50ms 并将目标设置为 所有直接子元素。动画将应用于每个直接子元素，并等待

• 第一个元素，1000ms，
• 第二个元素，1050ms，
• 第三个元素，1100ms，
• ...

Text staggering

这适用于 文本 组件。

如果设置 交错 并将目标设置为 所有字母。交错效果将应用于每个字母。

使用 css animation 属性

在 CSS 中，所有元素始终可以使用普通的 css 动画。但你可能需要为该特定的 css 规则开启 Disable in canvas 以便在编辑器中更轻松地编辑。