你想在 WordPress 中添加 CSS 动画吗？
您可以使用动画来吸引访问者的注意力并突出显示页面最重要的内容。他们还可以鼓励客户点击您的号召性用语按钮和链接。
在本教程中，我们将向您展示如何在 WordPress 中轻松添加 CSS 动画。
为什么要在 WordPress 中添加 CSS 动画？
您可以使用 CSS 动画将访问者的注意力吸引到页面的不同部分。例如，如果您有一家在线商店，那么动画可以突出产品最重要的功能或最大的卖点。这可以改善用户体验并为您带来更多销售额。
动画还将使您的CTA脱颖而出，这可以帮助您实现特定目标，例如让更多人订阅您的电子邮件通讯。
您可以将 CSS 动画添加到 WordPress 主题或子主题的样式表中。然而，这需要花费大量的时间和精力，如果您犯了错误，它可能会破坏您网站的设计甚至功能。
话虽如此，让我们看看如何轻松地将 CSS 动画添加到您的 WordPress 网站。如果您喜欢直接跳转到特定方法，那么您可以使用以下链接：
方法 1：如何轻松地为任何 WordPress 块添加动画（快速且简单）
添加简单 CSS 动画的最简单方法是使用Blocks Animation。
这个免费的动画插件允许您向任何块添加入口动画，而无需编写一行 CSS。它还具有打字动画和股票样式效果，您可以将其添加到文本和数字中。
首先，您需要安装并激活免费插件。如果您需要帮助，请参阅我们关于如何安装 WordPress 插件的初学者指南。
激活后，在 WordPress 块编辑器中打开任何页面或帖子。然后，只需单击要设置动画的块并选择右侧菜单中的“块”选项卡。
您会看到此菜单有一个新的“动画”部分。
只需单击展开“动画”部分，您就会看到三个不同的选项：动画、计数动画和打字动画。
“动画”是页面加载时播放一次的简短效果。要将这种入口动画添加到您的WordPress 博客，只需单击“动画”旁边的下拉菜单。
这将打开一个菜单，您可以在其中选择要使用的动画。
WordPress 编辑器将显示动画预览，因此您可以尝试不同的选项以查看最佳效果。
默认情况下，入口动画将在页面加载后立即播放，但如果您愿意，可以添加延迟。如果您在同一页面上使用多个动画，那么您甚至可以使用延迟来交错动画，这样它们就不会让人不知所措。
只需打开“延迟”下拉列表并从列表中选择一个时间即可。
您还可以使用“速度”下拉列表使动画更快或更慢。
当您尝试不同的设置时，您可以通过单击“重播动画”随时预览动画。
该插件还具有“计数动画”和“打字动画”。
打字动画允许您为文本添加动画效果，而计数动画则为数字添加股票样式效果。这些动画适用于任何支持文本或数字的古腾堡块，因此您可以使用它们来制作按钮、图像标题、标题等的动画。
要添加其中任何一种效果，请首先突出显示要设置动画的文本或数字。然后，单击小工具栏中的向下箭头。
您现在可以从下拉菜单中选择“计数动画”或“键入动画”。
如果这些选项呈灰色，请确保您突出显示了正确的内容。例如，如果您仅突出显示文本，则无法选择“计算动画”。
添加动画后，您可以使用小弹出窗口中的下拉菜单更改速度并添加可选的延迟。
例如，在下图中，我们使用一秒的延迟。
当您准备好使 CSS 动画生效时，请单击“发布”或“更新”按钮以在您的网站上应用动画。现在，如果您访问WordPress 网站，您将看到实时动画。
方法2：如何向自定义页面添加CSS动画（推荐）
如果您想向内置 WordPress 块添加简单的动画，那么 Blocks Animation 是一个不错的选择。但是，如果您想真正吸引访问者的注意力，让人们留在您的网站上并获得更多转化，那么我们建议使用SeedProd。
SeedProd 是最好的页面构建器插件，允许您使用简单的拖放编辑器创建漂亮的登陆页面、销售页面、主页等。
它还附带一个“动画标题”块，您可以使用它来创建旋转和突出显示的动画标题。
不管名称如何，您都可以使用动画标题块来为任何文本添加动画，包括号召性用语、副标题或您想要强调的任何其他文本。
SeedProd 还附带 40 多种入口动画，您可以将它们添加到任何块，包括图像、文本、按钮、视频等。
您甚至只需单击几下即可为整个部分和列设置动画。通过这种方式，您可以在几分钟内创建引人入胜的动画页面。
如果您使用动画来获得更多转化和销量，那么 SeedProd 可以与WooCommerce集成。它还支持您可能已经在使用的许多顶级电子邮件营销服务来推广您的网站。
如何设置 SeedProd 页面生成器
您需要做的第一件事是安装并激活 SeedProd。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后，您需要输入您的许可证密钥。
您可以在SeedProd 网站上的帐户中找到此信息。添加许可证密钥后，只需单击“验证密钥”。
创建自定义页面设计
首先，转到SeedProd » 登陆页面，然后单击“添加新登陆页面”。
在下一个屏幕上，系统会要求您选择一个模板。
SeedProd 附带 180 多个漂亮的模板，这些模板被组织成不同的类别，例如404 页模板和自定义 WooCommerce“谢谢”页面。
在本指南中，我们将向您展示如何创建带有动画文本和入口动画的销售页面，但无论您创建哪种类型的页面，步骤都是相似的。
只需单击任何选项卡即可查看该类别中的不同模板。
当您找到要使用的模板时，只需将鼠标悬停在其上，然后单击复选标记图标即可。
我们在所有图像中使用“Zen Sales Page”模板，但您可以使用任何模板。
接下来，您需要为页面指定标题。
SeedProd 将根据页面标题自动创建 URL，但您可以将其更改为您想要的任何内容。例如，向 URL 添加相关关键字通常可以提高WordPress SEO并帮助页面出现在相关搜索结果中。
要了解更多信息，请参阅我们关于如何为 WordPress 博客进行关键字研究的指南。
如果您对标题和 URL 感到满意，请单击“保存并开始编辑页面”。
这将加载 SeedProd 拖放页面编辑器。
在右侧，您将看到页面设计的实时预览，左侧有一些设置。
SeedProd 附带了许多可以添加到设计中的块，包括允许您添加社交共享按钮、视频、联系表单等的块。
有关更多信息，请参阅有关如何在 WordPress 中创建自定义页面的指南。
如何向 WordPress 添加动画文本
要向页面添加一些动画文本，请找到动画标题块并将其拖到您的页面设计上。
有两种方法可以使标题动起来。首先，“突出显示”样式向文本添加形状动画，例如圆形或带下划线的锯齿形。
您可以使用此动画来引起人们对标题中特定单词或短语的注意。通过突出显示最重要的内容，可以使您的标题更易于阅读和理解。这也是吸引人们注意号召性用语的好方法。
突出显示样式还有一些删除线形状。
您可以使用删除线来创建有趣且引人注目的效果，或者它可以简单地为您的设计添加一些乐趣。
要创建突出显示的动画，只需打开“样式”下拉列表并选择“突出显示”。
接下来，打开“形状”下拉列表并选择一个形状。当您单击某个形状时，SeedProd 将显示该动画的预览，以便您可以尝试不同的形状，看看您最喜欢哪一个。
SeedProd 还具有“旋转”动画样式，可为文本添加过渡效果。
通常，动画文本是访问者在页面加载时首先看到的内容，因此这是突出显示最重要文本的好方法。
要创建过渡动画，只需打开“样式”下拉列表并单击“旋转”。
然后，您可以打开“动画”下拉列表并选择要使用的过渡类型，例如淡入淡出、缩放或滚动。同样，SeedProd 将在页面编辑器内播放动画，因此您可以尝试不同的效果，看看您喜欢哪一种。
无论您是创建“突出显示”还是“旋转”动画，您都可以在动画文本之前和之后添加文本。
只需在“标题之前”和“标题之后”字段中输入即可。在“文本”字段中，添加要设置动画的单词或短语。
如果您想为整个标题添加动画效果，只需将“标题之前”和“标题之后”字段留空即可。
默认情况下，SeedProd 将循环播放动画，这可能会让一些访问者感到厌烦。
要仅播放动画一次，请单击以停用“无限循环”开关。
默认情况下，动画将在 8000 毫秒延迟后播放 1200 毫秒。
要使用不同的值，请在“持续时间”和“延迟”字段中输入。例如，您可以通过使用较短的持续时间来使动画更快。
您可能还想设置文本样式。例如，您可以更改字体大小和对齐方式。
如果您对动画标题的外观感到满意，请继续并单击“保存”按钮来存储您的更改。
在 WordPress 中添加入口动画
入口动画在页面首次加载时播放，因此它们是吸引访问者注意力的好方法。
您还可以使用它们来突出显示访问者应该首先查看的内容。例如，如果您有一个在线市场，那么您可以为产品的英雄图像或黑色星期五促销的横幅制作动画。
在 SeedProd 编辑器中，只需单击要设置动画的内容，然后选择左侧菜单中的“高级”选项卡。
然后，您可以继续并单击展开“动画效果”部分。
之后，只需从“入口动画”下拉列表中选择一个动画即可。
现在，您只需按照上述相同的过程即可将入口动画添加到任何块、部分或列。
在 WordPress 中发布您的 CSS 动画
如果您对页面的设置感到满意，请单击“保存”按钮上的下拉菜单，然后选择“发布”。
您现在可以访问此页面实时观看 CSS 动画。
我们希望本文能帮助您了解如何在 WordPress 中添加 CSS 动画。您可能还想阅读我们的提高速度和性能的终极指南，或者我们最常见的 WordPress 错误列表以及如何修复它们。
