CSS动画：使用这17种选项增强网站功能

网页加载时，吸引人的动画能牢牢抓住你的视线。无缝过渡，引导您轻松浏览网站内容。当你与应用程序上的按钮互动时，意想不到的色彩和动态效果迸发出来。

这些元素虽然微妙，却能极大地影响你对品牌的认知和整体数字体验。那么，是什么让这些引人入胜的细节栩栩如生呢？通常，这需要 CSS 动画的帮助。

在本指南中，我们将帮助您实现这一目标：

• CSS 和 CSS 动画入门
• 尝试 CSS 动画的主要原因
• 采用 CSS 动画的几个障碍（附解决方案）
• 可用于应用程序或网站的 17 种 CSS 动画范例
• 如何开始在网站中添加 CSS

认识 CSS

CSS 是层叠样式表的简称。

CSS 是一种代码语言，它规定了网站或应用程序中图形和内容元素的外观和操作方式。CSS 对于自定义颜色和字体、页面元素的定位和间距以及创建动画都非常有用。有些 CSS 动画 “纯粹 ”由 HTML（超文本标记语言）和 CSS 代码构建而成，有些 CSS 动画则结合了其他类型的代码（如 JavaScript）或现有媒体（如 GIF）。

CSS 诞生于 20 世纪 90 年代初，从 CSS1 到 CSS2 再到 CSS3（目前广泛使用的版本）。在本文中，我们将按照惯例，在提及最新版本时使用 “CSS ”一词。

HTML 就像房屋的地基和框架，没有地基和框架，房屋就无法存在。而 CSS 则通过油漆、饰面和装饰来改变房屋，赋予其独特的风格和功能。

CSS 动画构件

CSS 动画使用 CSS 代码将各种属性和值串联起来，使屏幕上的元素动起来。

CSS 属性是动画的组成部分，如背景、边框半径、字体、边距、运动类型（如旋转或渐变）等。值通过定义颜色、对齐方式、大小、时间长度、方向、速度等来填充这些动画属性的细节。

下面我们以常用的 @keyframes 规则中的元素为例，看看属性和值是如何协同工作的，该规则定义了整个动画序列中的 CSS 过渡：

• animation-name 属性给出了动画的名称。
• animation-duration 属性概述了动画的长度。值通常以秒（0 秒、4 秒等）为单位显示。
• animation-delay 属性指定了动画开始的延迟时间。其值也以秒为单位（-2 秒、5 秒等）。
• animation-iteration-count 属性指定动画运行的次数。该值表示你希望动画重复多少次；例如，infinite-alternate 将使动画永远运行下去。
• animation-direction 属性说明动画的播放方式。值包括 normal（正向）、reverse、alternate 等。
• animation-timing-function 属性概括了动画的速度曲线。值包括 ease-in-out，以创建平缓的开始和结束；cubic-bezier，以创建外观复杂的曲线等。
• animation-fill-mode 属性定义了动画不播放时元素的外观。值包括 forwards 保留上一个关键帧设置的值等。

现在将所有内容整合在一起！在 W3Schools 提供的这个示例中，我们将一个动画（名为 example）附加到了 <div> 元素上。动画开始后，将持续 4 秒，同时背景将从红色过渡到黄色：

/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

(注：这只是一个例子。关键帧动画并不是创建 CSS 动画的唯一方法，而且它们并不与所有浏览器版本兼容，请继续阅读，了解更多有关兼容性的见解和技巧。）

实施 CSS 动画的 3 个绝佳理由

从为令人难忘的互动提供动力，到确保以现代人期望的速度进行互动，CSS 动画为数字体验增添了许多亮点–对你和你的客户或访客来说都是如此。

创造独特的故事和体验

网站充当数字广告牌的时代已经一去不复返了。

在全球经济中，网站和应用程序是您讲述品牌故事的最佳机会。

为什么要注重品牌故事？因为一个好的故事能让您的品牌与众不同，吸引理想受众的注意力，建立持久的联系，最重要的是，它还能激励人们采取行动。

而您的故事在一定程度上是建立在您的用户体验中包含的互动元素之上的。

CSS 动画就是要创造独特的体验，与用户一起反应和移动，与品牌故事建立默契和互动。

更快捷地进行改造和维护

CSS 是一种有组织且简短的编码语言。在网络开发领域，它被称为简洁。对于简单的应用程序和网站项目来说，样式表通常可以保持在最低水平。

这就意味着，当需要更新项目、进行日常维护或刷新外观和体验时，可以很快找到需要更改的地方，创建更新并将其应用到整个界面。无需重新编码和部署大量单独的 HTML 文件。

优化速度

与 JavaScript 和其他编码语言相比，CSS 被认为是轻量级的，因此它是为产品添加生动、引人入胜的内容和体验的绝佳工具，而不会增加重量，降低加载速度。

此外，它还倾向于积极缓存。这些因素加在一起，意味着使用 CSS 制作的动画应能在首次点击后以及网站或应用的后续加载中快速显示。

作为谷歌搜索结果的一个重要排名因素，速度是所有拥有在线业务的企业都应该考虑的问题。

深入学习 CSS 动画之前的注意事项

现在进入减速区。在你一头扎进 CSS 动画之前，我们需要确保你了解并准备好应对一些小问题。

兼容性问题

有没有注意到，当你在手机上与网站交互时，一些功能似乎会消失或碍事，或者让你的电脑速度变慢？

不同的设备（手机、智能手表、平板电脑、电脑等）和浏览器（Chrome、Safari、Firefox 等）都采用不同的技术。这些技术意味着它们与代码语言的交互方式会有所不同，CSS 动画也是如此。

如果不进行自定义调整，那么在使用笔记本电脑的 Firefox 上看起来酷炫无比的动画效果，在使用手机 Safari 浏览器的人看来可能会很奇怪。

质量保证 (QA) 测试对于确保 CSS 动画在用户与您的数字网站进行交互的所有地方都能兼容至关重要。

解决方案： 在创建 CSS 时，使用 CSS 验证器和浏览器开发工具来帮助识别兼容性问题和错误。对代码特别精通的人可以安装 Bourbon 等 Sass 混合库，以保持浏览器前缀（webkit用于 Chrome 和 Safari，moz用于 Firefox 等）的更新和兼容。

试试 17 种动态 CSS 动画

准备好使用 CSS 动画打造吸引并留住用户的精彩数字体验了吗？准备好提高至关重要的网站速度，减少维护和重新设计的时间了吗？

那你就来对地方了！我们整理了一些超棒的 CSS 动画供你欣赏。点击任何你喜欢的选项，获取所需的代码，然后将其添加到你的网站样式表中。(顺便提一句，CodePen 上的公共笔根据其许可细则，任何人都可以出于任何目的自由使用）。

加载动画

加载动画可能不是 CSS 动画中最令人兴奋的一类，但它们对用户体验至关重要。如果你能提供一个指示器，告诉访问者即将出现精彩的内容，那么应用程序和网站的访问者就更有可能耐心等待加载时间。

CSS Loader with dots，作者：Aliaksei Peterson

现在，“稍等片刻！”的意思已经被人们普遍接受。就像代码一样，这个选项简洁明了，非常适合语气严肃或风格简约的在线网站。

Simple HTML & SVG Loading Spinners，作者：Stephen Delaney

另一个经典的加载符号–旋转器。该动画可选择集成 SVG（Scalable Vector Graphic 的缩写，即可缩放矢量图形），它可以缩放而不会降低质量。

Loading Animation，作者：Mohamed Yousef

这组旋转的水滴状图形提供了一个精美简洁的动画，让人沉醉其中，从而减少了额外加载时间的烦恼。夫复何求？

Only Css Animation #02，作者：Hisami Kurita 

这是一个令人印象深刻的纯 CSS 动画，让人联想到进入高档餐厅或酒店的网站。更改颜色和名称以匹配您自己的品牌。

The Glowing Loader – Pure CSS Animation，作者：Maxime Rossignol

这是我们见过的最有创意的加载屏幕，这个动画让观众在等待其他数字元素开始运行时有很多东西可看。

内容动画

想确保您的应用程序和网站用户不会错过关键信息？使用这些 CSS 动画来突出显示吧。

Changing Text Animation CSS，作者：Coding Yaar

使用此动画为标题和其他重要文本添加一点亮点，并提供滑入移动、颜色变化等细节。

CSS Block Revealing Effect，作者：Abubaker Saeed

该动画的效果提供了另一种有趣的方式，可将视线吸引到重要的内容元素上，确保访客不会错过。

CSS Reveal Slider，作者：Adam Kuhn

它采用了大量有趣的字体、动画按钮和可揭示更多信息的翻转功能–这似乎是向用户介绍常见问题解答、功能等较长的不可错过内容的一个不错选择。

Animated Info Card，作者：亚当-库恩

该选项来自上一个 CSS 动画的创作者，它以另一种大胆而富有创意的方式引导用户了解您的品牌故事元素。

按钮动画

按钮通常是让用户采取行动或深入了解内容的入口。为重要按钮添加 CSS 动画，激发互动。

CSS Button On Hover Slide Effect，作者：RazorX

这里有大量选项，可为普通按钮添加炫酷的填色动画。

Button Animations，作者：Alex Belmonte

想给按钮加点动感？使用此 CSS 为按钮添加悬停效果以及弹跳、摇摆等动作。

CSS button hover effect，作者 Julia

极简但极具冲击力的色彩为您的按钮增添一些惊喜和愉悦。

背景动画

您希望网站或应用程序中某些元素的背景足够有趣，能够吸引人的眼球，同时又不影响用户的阅读和操作。

Animated Background Gradient，作者：Mario Klingemann

在网站或应用程序关键部分的背景上应用这种无限循环的颜色，以增加动感。

CSS Animations with SVGs，作者：Joyanna

柔和、多彩的形状配合细腻的动作，可为您最重要的内容部分提供与众不同的背景。

Simple parallax scroll，作者：Ungmo Lee

视差滚动动画可使前景和背景同时移动，但移动速度不同，从而产生深度错觉。从示例中可以看出，如果不加节制地应用，视差效果可能会让人难以接受。

任意动画

试试这些简单有趣的 CSS 动画，为用户体验的各个环节增添一点乐趣。

Template: Logo，作者：亚历克斯-卡茨

将鼠标悬停在徽标上，可以看到轻微的膨胀效果。这种微妙的运动可用于徽标、按钮、图标和其他组件。

Floating Animation – CSS，作者：Mario Duarte

像这样轻柔的浮动效果是另一种令人惊喜和有趣的触感，它能让观众知道你关心你的数字资产以及他们的体验。

如何为网站添加 CSS

上述每个 CSS 动画都附有 HTML、CSS，有时还有其他代码，你可以直接粘贴到网站样式表中，然后根据需要进行编辑，使之成为你自己的动画。

如果你的网站是定制的，由你来管理代码，而你还不熟悉 CSS，我们认为，在尝试实现上述动画之前，了解一下 CSS 语言会对你有所帮助。了解创建一行代码的基础知识，然后通过 CSS 学习指南深入学习开发 CSS 技能的最佳教程。

从上述示例中，你会发现创建一个动画需要大量代码。如果你对 CSS 已经驾轻就熟，并准备优化空间和时间，可以考虑使用 CSS 动画库。每个库都会说明如何将其添加到你的网站，通常涉及在标记中添加源文件或 CDN。安装完成后，你就可以使用库中特定的动画速记来添加动画。

如果你使用的是 WordPress 网站，那么该平台本身就提供了使用网站编辑器（某些主题的测试版功能）或自定义器（大多数经典主题和某些第三方主题都提供了自定义器）编辑 CSS 的便捷指南。在这些编辑界面中，你可以粘贴上述 CSS 动画示例中的代码。