如何在WordPress中轻松添加CSS动画

Have you seen those beautiful CSS Animations on popular sites? Animated effects like sliding content, fade in feature boxes, bouncing images, etc. In this article, we will show you how to easily add CSS animations in WordPress without writing any code.

您是否在热门网站上看到了那些漂亮CSS动画？ 动画效果，如滑动内容，在功能框中淡入淡出，弹跳图像等。在本文中，我们将向您展示如何轻松地在WordPress中添加CSS动画而无需编写任何代码。

什么时候以及为什么应该使用CSS动画？ (When and Why You Should Use CSS Animations?)

CSS animations allow you to grab user’s attention on different parts of the page.

CSS动画可让您在页面的不同部分吸引用户的注意力。

You can use them to animate product features or a call to action button.

您可以使用它们来制作产品功能或号召性用语的动画。

Many websites use CSS animations as users scroll down a page. This adds a storytelling element to the page with items progressing as users scroll down.

当用户向下滚动页面时，许多网站都使用CSS动画。 这会向页面添加一个讲故事的元素，随着用户向下滚动，项目也会进行。

CSS animations are also faster than flash or videos. They load quickly and are supported by most modern web browsers.

CSS动画也比Flash或视频要快。 它们加载速度很快，并且得到大多数现代Web浏览器的支持。

You can add CSS animations manually to your WordPress theme or child theme‘s stylesheet. However, most beginners don’t want to edit their theme files or spend time on learning CSS.

您可以将CSS动画手动添加到WordPress主题或子主题的样式表中。 但是，大多数初学者不想编辑他们的主题文件，也不想花时间学习CSS。

Having said that, let’s see how you can easily add CSS animations to your WordPress site.

话虽如此，让我们看看如何轻松地将CSS动画添加到WordPress网站。

设置CSS Animate！ 插入 (Setting up CSS Animate! Plugin)

We will be using a plugin for this tutorial. It allows you to create CSS animations using a WYSIWYG editor.

我们将在本教程中使用一个插件。 它允许您使用WYSIWYG编辑器创建CSS动画。

First thing you need to do is install and activate the Animate it! plugin. The plugin works out of the box and there are no settings for you to configure.

您需要做的第一件事就是安装并激活Animate！ 插入。 该插件可以直接使用，没有可供您配置的设置。

Simply create a new post, and you will notice a new button in your WordPress visual editor labeled ‘Animate it!’.

只需创建一个新帖子，您将在WordPress 可视编辑器中注意到一个名为“ Animate it！”的新按钮。

Clicking on the button will bring up a popup where you can design your CSS animation. The plugin supports many CSS animations for you to choose from.

单击该按钮将弹出一个弹出窗口，您可以在其中设计CSS动画。 该插件支持许多CSS动画供您选择。

First you need to select an animation style. After that you need to choose the animation delay and duration time. Finally, you need to select when you want the animation to appear.

首先，您需要选择一种动画样式。 之后，您需要选择动画延迟和持续时间。 最后，您需要选择何时显示动画。

The plugin offers three choices. You can run the animation on click, hover, or scroll offset.

该插件提供了三种选择。 您可以在单击，悬停或滚动偏移时运行动画。

Once you are satisfied with the settings, you can click on the Animate it button to see a preview of the animation.

对设置满意后，可以单击“对其进行动画处理”按钮以查看动画的预览。

Next, click on the insert button to add the animation into your WordPress post or page. You will notice that the plugin will add a shortcode with some dummy content inside it into post editor.

接下来，单击插入按钮以将动画添加到您的WordPress帖子或页面中。 您会注意到，该插件将在其中添加一个带有一些虚拟内容的简码到帖子编辑器中。

You need to delete the dummy content inside the shortcode, and replace it with your own content, images, or anything else you want to animate.

您需要删除简码中的虚拟内容，并将其替换为您自己的内容，图像或其他要设置动画的内容。

Now that you’re down, click to save or publish the post and then click on the preview button. You will see your content beautifully animated.

现在您已经失望了，单击以保存或发布该帖子，然后单击“预览”按钮。 您将看到内容精美的动画。

We hope this article helped you learn how to easily add CSS animations in WordPress. You may also want to see our comparison of the 5 best drag and drop WordPress page builders.

我们希望本文能帮助您学习如何在WordPress中轻松添加CSS动画。 您可能还想看看我们对5种最佳拖放WordPress页面构建器的比较 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-easily-add-css-animations-in-wordpress/