> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 为落地页元素添加动画效果

> 为按钮、图片、文字等元素添加动画：从动画库选择入场或强调效果，设置 On Load、On Hover、On Click 等触发方式，以及速度、延迟和重复次数。

动画给元素加上运动效果，让页面更生动、更有互动感。它能吸引注意力、引导用户，并改善整体体验。

## 在哪里找

1. 选中任意元素（按钮、图片、文字等）
2. 转到**右侧面板**
3. 展开 **Animation** 区域
4. 点击 **+ Add**，或编辑已有的动画

## 选择动画

动画面板中有一个很大的动画库。

* 可以**滚动**浏览全部选项
* 也可以用**搜索框**快速找到某个动画

动画还按**分类**组织，比如：

* Attention Seekers
* Entrances

👉 这样更容易根据目标找到合适的动画类型。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/image-17.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=ab72592c91c31fbe3b1262a2491a4a8a" alt="右侧面板中的动画库和分类" width="664" height="933" data-path="images/image-17.png" />
</Frame>

## 动画设置

### Trigger

决定动画什么时候播放：

* **On Load**：元素出现时播放
* **On Hover**：用户鼠标悬停时播放
* **On Click**：点击时播放
* **On Viewport**：持续播放（如支持）

### Speed

* 控制动画播放的速度

### Delay

* 在动画开始前加一段停顿

### Repeat

* 控制动画播放的次数

## 示例

* 动画：Fade In
* Trigger：On Load
* Speed：Normal
* Delay：0.3s
* Repeat：1

👉 结果：页面加载时，元素平滑地浮现

## 最佳实践

* 动画要克制，而且有明确目的
* 避免同时使用过多动画
* 用 entrance 类动画让元素自然出场
* attention 类动画只在真正需要的地方用


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.