CSS动画完全解析：轻松让网页元素动起来

发表时间: 2024-09-10 22:41

前言

CSS动画是一种通过使用CSS来创建网页元素的动态效果的方法，与传统的JS动画相比，CSS动画具有简洁、易读和性能优越的特点，可以在不需要大量代码的情况下实现复杂的动画效果

CSS动画主要由transition和animation组成，其是网页动态效果实现的两种重要工具

在现代网页设计中，CSS动画不仅能吸引用户的注意力，还能增强用户体验，使界面更加生动和互动

一些历史
CSS过渡transition和动画animation是在CSS3中引入并标准化
Transition最早是在2009年由Apple在WebKit浏览器引擎中引入，作为WebKit的一个扩展功能出现的；逐渐被W3C采纳并标准化；最终在2012年，W3C发布了CSS Transitions Module Level 3的候选推荐规范，正式确立CSS Transition的标准
Animation同样是在2009年由Apple在WebKit浏览器引擎中引入的，其允许开发者通过关键帧来定义更加复杂和灵活的动画效果；在2013年，W3C发布了CSS Animations Module Level 3的候选推荐规范，正式确立了CSS Animation的标准
在CSS3之前，网页动画主要通过JavaScript实现，这需要大量的代码和较高的开发成本，引入CSS过渡和动画后，开发者可以用简洁的CSS代码实现动画效果，大大简化了开发过程；同时CSS过渡和动画通常由浏览器的渲染引擎优化处理，性能较好，特别是在移动设备上表现更佳

Transition

CSS过渡是一种通过定义元素属性变化的过渡效果，使元素在状态变化时(如悬停、点击)呈现出平滑的动画效果，其可以为元素的属性变化添加视觉上的缓动效果，使页面更加生动

在CSS过渡(Transition)这个概念之前，CSS是没有时间轴的，所有的状态都是即时完成的，比如点击平移，那么点击后就会直接出现在目标位置，给用户感受就是“闪”，而Transition就是为了给这个过程加上时间、速度、延迟等概念，让其是持续的，而不是一瞬的

其兼容性如下(基本上均支持)：

属性

要实现一个过渡(Transition)效果，主要可由如下属性进行设置

transition-property

主要用于定义应用过渡效果的CSS属性，例如：width, height, background-color

示例：

当然，不是所有属性都可以使用Transition
Transition主要支持可以数值变化的属性过渡，这些属性通常是与尺寸、位置、颜色和透明度相关的；不支持的属性主要是无法在数值上连续变化的，或者值是离散的，而不是连续的，常见的如：display、position、z-index、content、cursor等
在较新的规范中，transition还有一个新属性transition-behavior，其主要就是为了处理离散属性的过渡效果，感兴趣可自行探索

transition-duration

设置过渡效果的持续时间

示例：

transition-timing-function

定义过渡效果的速度曲线，如淡入、淡出等

常用的时间函数：ease(默认值), linear, ease-in, ease-out, ease-in-out
示例：

除了内嵌的速度函数外，还可用cubic-bezier函数进行自定义速度模式
实际上，ease等值也是cubic-bezier函数定义的曲线，如ease则等于cubic-bezier(.25,.1,.25,1)
对于cubic-bezier，不熟悉的可借助cubic-bezier.com工具进行设置

transition-delay

设置过渡效果的延迟时间，即设置过渡在多久后开始

示例：

transition

该属性是Transition效果属性的简化合并版本，可以在一行中定义过渡的属性、持续时间、时间函数和延迟时间

基本语法：

示例：

该命令还可以同时定义多个属性，用逗号 , 隔开

优缺点

使用Transition可以方便地实现简单的动画效果，但也有一定的优劣性

优点：

简单易用，适用于两种状态之间的平滑过渡

缺点

只能在预定义的状态变化时(主动)触发，不能实现复杂的动画效果
过渡是一次性的，不能重复发生，除非再次触发
只有两个状态：开始和结束

Animation

CSS 动画(Animation)允许创建更复杂和灵活的动画效果，通过定义关键帧(keyframes)，可以在多个状态之间进行过渡，而不仅限于两种状态，实现更复杂和精细的动画效果

其兼容性如下(大部分现代化浏览器均支持)：

属性

要实现一个动画(Animation)效果，主要可由如下属性进行设置

animation-name

用于指定要应用的关键帧动画的名称，即@keyframe [name] {}定义的[name]

示例：

animation-duration

设置动画的持续时间，即动画播放一次所耗时长

示例：

animation-timing-function

定义动画的速度曲线，其定义了动画的节奏

可能值：ease(默认值), linear, ease-in, ease-out, ease-in-out、cubic-bezier()或steps
示例：

cubic-bezier()是三次贝塞尔曲线函数，可定义一条三次贝塞尔曲线，使动画根据曲线节奏连续(平滑)播放，其可实现很多效果(如回弹效果)
steps()是调速函数，可指定步进数，steps()会根据你指定的步进数，将整个动画切分为多帧，在帧与帧之间硬切(不做任何插值处理)，主要用于设计逐帧动画
这里不对steps进行深入了解，在之后的文章中有机会的话再深入探索，感兴趣地可先自行探索

animation-delay

设置动画的延迟时间，即多久后开始执行动画

示例：

一个有意思的技巧是：该值可为负，即可以让动画提前执行
如：用于设计loading动画
假设一个动画其2s后的状态才是我们想要先看到的，此时可以设置delay为-2s

animation-iteration-count

指定动画的播放次数，值可以是数字或者 infinite

示例：

该属性除了整数值外，还可以设置为小数值，以实现部分动画的播放

animation-direction

用于设置动画在每个循环中的播放方向

可能值为

normal(默认值)：动画每次循环都按正向播放，也就是从起始帧到结束帧
reverse：动画每次循环都按反向播放，也就是从结束帧到起始帧
alternate：动画在每个循环中正向和反向交替播放
alternate-reverse：动画在每个循环中反向和正向交替播放

示例：

animation-fill-mode

用于定义在动画执行前后，动画应用到目标元素的样式，主要决定了动画开始前和结束后，元素是否保留动画中定义的样式

其可能值如下：

none(默认值)：元素在动画开始前和结束后都不会保留动画中的样式，也就是说，动画的效果仅在动画执行期间影响到元素
forwards：元素在动画结束后会保持动画的最后一个关键帧(keyframe)的样式，即停留在结束状态
backwards：元素在动画开始前会应用动画的第一个关键帧(keyframe)的样式，这个效果在animation-delay属性有值时较为明显
both：元素在动画开始前会应用第一个关键帧的样式，并在动画结束后保持最后一个关键帧的样式，即为forwards和backwards的结合

示例：

animation-play-state

控制动画的播放状态：运行或暂停，就如同视频播放键似的

可能的值：running(默认值)、paused

示例：

举个栗子
运用该属性，我们可以实现一个胶卷阅读效果
假设有一行图片类似胶卷展开般由右向左移动，当我们hover元素时，将其state设置为parused，即移动会暂停，当取消hover时，动画(移动)继续

关键帧

主要用于配合animation使用，可指定动画的不同阶段以及在每个阶段中元素的样式变化，每个动画都由一组关键帧组成，每个关键帧定义了动画在特定时间点的样式，其是CSS 动画的核心，也是创建复杂动画的关键

大致语法如下：

animation-name：动画的名称，可以是任意合法的标识符，用于在 CSS 中引用这个动画

keyframe-selector：关键帧选择器，可以是百分比(0%到100%)或关键词(from和to)

from 等同于0%，表示动画的起点
to 等同于100%，表示动画的终点

举个例子

在上面的代码中，动画会使.box元素平滑地淡入淡出并垂直移动

从透明和0像素的垂直位置开始
在50%时变为不透明，垂直位置为50px
在100%时再次变为透明，垂直位置为100px

animation

用于简化多个动画相关属性的书写，一次性设置动画的名称、持续时间、时间函数、延迟、循环次数和方向，是一个复合属性

语法如下