将 CSS 动画添加到 WordPress
已发表: 2022-07-11动画对于您的网页来说可能是一种引人入胜且视觉上有趣的功能。 但是，使用 Flash 或 JavaScript 构建动画会占用您网站的大量资源。
幸运的是，您可以改为使用级联样式表 (CSS) 将动画添加到 WordPress 网站。 这种编码语言使您能够在您的网站上加入无限的动画，但仍然相对容易上手且易于学习。
在本文中，我们将讨论 CSS 动画的工作原理以及如何在使用和不使用插件的情况下向您的网站添加 CSS 动画属性。 让我们动起来吧！
CSS 动画是如何工作的？ （以及为什么要使用它们）
CSS3 使用户有机会通过随时间改变元素（例如，图像或按钮）的样式来创建动画。 您可以根据需要修改元素的任意数量的 CSS 属性，次数不限。
与 Flash 或 Javascript 动画不同，CSS 动画避免了浏览器兼容性问题和复杂的编码。 这使您能够将注意力吸引到重要功能上，而不会造成性能下降等负面影响。
使用插件添加 CSS 动画
如果您对自己的编码技能没有信心，我们可以为您提供保障。 您可以使用插件轻松创建 CSS 动画。
第 1 步：安装和激活 CSS 动画插件
要开始使用，您需要安装 CSS 动画插件。 我们正在使用 Blocks Animation: CSS Animations for Gutenberg Blocks，这是一个专门为块编辑器制作的相对较新的工具。
您可以通过导航到 WordPress 仪表板中的插件 > 添加新的来找到此插件。 找到它后，单击立即安装，然后单击激活：
激活完成后，转到要包含简单动画的帖子或页面。
第 2 步：设计动画
接下来，单击要设置动画的元素。 在侧边栏的Block选项卡中，查找标记为Animation的部分，该部分是我们在 Step 1 中激活插件时添加的。 在这里，您将看到一个下拉菜单，其中列出了几种不同的效果：
您可以使用任意数量的动画选项来找到适合您内容的动画选项。
第 3 步：自定义延迟和速度
Blocks Animation 插件还带有定时功能来自定义动画的延迟和速度：
这两个设置中的第一个推迟了动画的开始。 这可能有助于在页面加载后将注意力吸引到您的元素上，或者使您能够组合使用动画，正如我们稍后将演示的那样。 您可以将动画延迟属性设置为长达五秒。
使用速度下拉菜单，您可以使动画变慢、变慢、变快或变快。 较慢的动画可能对访问者来说更加微妙且不那么刺耳，而较快的动画将更能吸引他们的注意力。
第 4 步：保存并预览您的动画
我们建议您将帖子或页面保存为草稿，并在发布之前预览您的动画元素。 如果您在一个页面上处理多个 CSS 动画，请务必保存动画名称属性。 虽然动画可以证明非常有用，但它们也有可能分散注意力并使您的页面感觉混乱。
预览页面并保持动画相对简单可以防止出现这些不良结果。 下面，您可以看到我们完成的 CSS 动画示例，它将动画图像与我们在前面步骤中设置样式的按钮配对：
如果您发现您的动画不适合您的其余内容或具有您想要的效果，您可以简单地返回块编辑器并进行调整。 这就是使用 CSS 动画插件的美妙之处——它既快速又简单。
在没有插件的情况下添加 CSS 动画
如果您喜欢编辑主题文件，您可以在没有插件的情况下手动创建自定义动画。 这需要一些编码知识，所以这个解决方案最好留给那些有开发经验的人。
在开始之前，请务必备份您的网站。 使用子主题也是明智之举，这样您可以在需要时轻松恢复到主题的默认文件。
第 1 步：了解涉及的 CSS 属性
在实际进行任何编辑之前，在创建 CSS 动画时需要牢记八个重要属性：
- @keyframes：指定将通过动画应用到元素的样式。
- 动画名称：创建一个名称，您可以使用该名称在代码中的其他位置引用动画。
- 动画持续时间：定义动画应该运行多长时间。
- 动画延迟：说明页面加载后动画应该等待多长时间才能开始。
- animation-iteration-count：注意动画应该运行多少次。
- animations-direction：说明动画应该运行的方向。
- animation-timing-function：决定动画的速度曲线。
- animation-fill-mode：指定动画不播放时元素的样式。
- 动画：将关键帧绑定到元素的简写属性。
要理解的这些属性中最重要的是“关键帧”。 这个术语来自手绘动画过程，其中主帧被称为关键帧，而其他帧被绘制成引入或引出它。
在 CSS 动画中，关键帧指定正在发生的事情和时间。 以这个为例：
@keyframes 示例 {
0% {背景颜色：红色；}
25% {背景色：黄色；}
50% {背景色：蓝色；}
100% {背景色：绿色；}
}上面的关键帧表明，在动画进行到 25% 时，指定元素的背景颜色将从红色变为黄色。 百分比通常用于定义动画的时间。 但是，from 和 to 可以分别用来代替 0% 和 100%。
第 2 步：创建animate.css文件
为了添加 CSS 动画，您需要使用上面的属性在首选的文本编辑器中创建一个文件。 它应该包括您要使用的任何动画的关键帧。 然后您将它们绑定到特定的 CSS 类，以便您可以将它们应用于您网站上的元素。
这是一个例子。 在下面的代码中，我们首先使用 transform 和 visibility 属性创建一个 CSS 关键帧动画，这将使我们能够从屏幕右侧滑入一个元素：
@keyframes slideInRight {
从 {
-webkit-transform: translate3d(100%, 0, 0);
变换： translate3d(100%, 0, 0);
能见度：可见；
}
至 {
-webkit-transform: translate3d(0, 0, 0);
变换： translate3d(0, 0, 0);
}
}然后我们必须将该关键帧绑定到一个 CSS 类。 在本例中，它被命名为 slideInRight。 这段代码将直接放在文件中上面的关键帧之后：
.slideInRight {
-webkit 动画名称：slideInRight；
动画名称：slideInRight；
}您可以重复此过程以创建任意数量的动画。 然后，将文件另存为animate.css。 或者，您可以下载流行的 Animate.css 文件。 它包含数十种流行动画的关键帧和 CSS 类，因此您不必编写自己的复杂动画。
第 3 步：将您的animate.css文件上传到您的站点
完成animate.css文件后，您需要将其上传到主题目录。 为此，请使用文件传输协议 (FTP) 和 FTP 客户端（例如 FileZilla）访问您的站点。 您可以在您的主机帐户中找到必要的凭据。
您需要输入您的public_html目录，导航到wp-content > 主题，然后找到您的活动主题（或子主题）的文件夹：
查找标有css的子目录。 如果存在，请将您的animate.css文件（或 Animate.css 中的animate.mini.css文件）上传到其中。 如果您还没有此文件夹，您可以轻松地创建一个新的子目录并相应地命名：
文件上传成功后，不要马上离开 FTP 客户端。 您需要进行一些文件编辑才能在您的 WordPress 网站上访问此样式表。
第 4 步：通过functions.php调用 Animate 样式表
接下来，在您的活动主题文件夹中，找到您的functions.php文件。 最后，添加这段代码：
add_action('wp_enqueue_scripts', 'wpb_animate_styles');
功能 wpb_animate_styles() {
wp_enqueue_style('animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}请注意，如果您从 Animate.css 上传了animate.min.css文件，则需要在最后一行使用 animate.min.css 而不是 animate.css。
这使您的主题能够调用您刚刚上传的样式表，以便您可以将其中的类应用于您网站上的元素。 保存更改后，返回 WordPress 仪表板。
第 5 步：使用 CSS 类应用动画
您现在可以将animate.css文件中的任何类应用于帖子和页面中的元素。 如果您使用的是 Animate.css 文件，您可以参考 GitHub 上包含的所有内容的完整列表。
导航到包含您要制作动画的元素的帖子或页面。 在经典编辑器中，切换到文本编辑器。 如果您使用的是块编辑器，请单击块工具栏中的三点图标并选择Edit as HTML ：
然后，将动画类和动画类添加到元素标签中：
最后，预览您的帖子或页面。 您的动画现在应该可以工作了：
您可以调整此过程以将任何动画合并到animate.css文件中。
使用 WP Engine 让您的网站看起来很棒
使用视觉上有趣的功能（例如动画）可以吸引您网站的访问者并打造更专业的在线形象。 在 WP Engine，我们为为 WordPress 开发人员提供最佳提示和技巧而感到自豪，因此您的网站总是看起来最好。
与我们一流的托管平台结合使用时，您将拥有打动用户所需的所有工具。 看看我们今天的计划！