CSS动画技术（css-animation）

Zarathusa

已于 2024-05-23 22:57:42 修改

阅读量1.2k

点赞数 27

分类专栏：前端文章标签： css 前端

于 2024-05-23 22:54:35 首次发布

本文链接：https://blog.csdn.net/weixin_44420955/article/details/139159506

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

掌握CSS动画技术

一、CSS动画基础

1. 什么是CSS动画？

CSS动画是一种在网页上创建动态效果的技术，通过CSS样式规则来实现元素的平滑过渡和变换。
CSS动画通过改变属性值来控制元素的动态外观，如位置、大小、颜色、透明度等。

2. CSS动画与传统JavaScript动画的区别

CSS动画是基于浏览器引擎的硬件加速，通常比JavaScript动画更流畅和高效。
JavaScript动画需要更多的编程和逻辑处理，而CSS动画通常只需要一些简单的样式规则。
CSS动画适用于大多数动画需求，但JavaScript动画更适合复杂的交互和逻辑。

3. CSS动画的优势和用途

优势：
- 性能：CSS动画由浏览器引擎处理，通常更快速和流畅。
- 简单：创建基本的CSS动画通常只需几行CSS代码。
- 响应式：CSS动画可以与媒体查询和响应式设计无缝集成。
- 支持性：几乎所有现代浏览器都支持CSS动画。
用途：
- 用户界面改进：按钮悬停效果、菜单展开、图标动画等。
- 数据可视化：图表、图形和数据展示动画。
- 页面过渡：页面切换、加载效果和滚动动画。
- 响应用户操作：表单验证、交互式元素反馈。

4. CSS动画的属性

属性	作用	使用方法	应用场景
`transition`	允许在CSS属性值变化时创建平滑的过渡效果	为元素设置`transition`属性	状态变化过渡、悬停效果等
`transform`	用于在元素上进行2D或3D转换，如平移、旋转、缩放和倾斜	应用各种`transform`操作	旋转动画、图形变换、滑动面板等
`animation`	允许创建复杂的动画序列，通过关键帧控制元素的变化	定义`@keyframes`规则并应用到元素	复杂动画效果、多属性控制、多关键帧动画序列

二、CSS Transition

1. 什么是CSS Transition？

CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。
它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。

2. 使用transition属性创建简单的过渡效果

transition属性是用于定义过渡效果的关键。
通过在元素的CSS规则中设置transition属性，你可以告诉浏览器哪些属性应该过渡，并指定过渡的持续时间和缓动函数。

/*示例代码：如何为元素的颜色属性添加过渡效果。*/
.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.3s ease;
}

.element:hover {
  background-color: red;
}

3. 定义过渡的属性、持续时间和缓动函数

过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。
持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。
缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。

定义过渡的属性：

过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。通常，你可以指定多个属性，以便同时过渡多个属性。

例如，在以下CSS规则中，我们定义了在鼠标悬停在元素上时应用的背景颜色和宽度属性的过渡效果：

.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.3s ease, width 0.3s ease;
}

.element:hover {
  background-color: red;
  width: 150px;
}

在这个示例中，transition属性定义了要过渡的属性列表：background-color和width。当元素状态从非悬停到悬停时，这些属性的变化会产生平滑的动画效果。

定义过渡的持续时间：

过渡的持续时间定义了过渡效果从开始到结束所需的时间。你可以使用秒（s）或毫秒（ms）作为单位来指定持续时间。

例如，在上面的示例中，我们定义了过渡的持续时间为0.3秒（300毫秒），这意味着当元素状态发生变化时，动画将在0.3秒内完成过渡。

transition: background-color 0.3s ease, width 0.3s ease;

定义缓动函数：

缓动函数决定了动画过程中属性值的变化速度。它控制了动画在开始、中间和结束时的加速度和减速度。CSS提供了多种内置的缓动函数，如ease、linear、ease-in、ease-out等，也可以使用自定义的贝塞尔曲线。

例如，在上面的示例中，我们使用了ease缓动函数，它提供了平滑的加速和减速效果。

transition: background-color 0.3s ease, width 0.3s ease;

通过这些定义，元素在悬停时将平滑地从蓝色变为红色，并且宽度从100px变为150px，同时遵循了指定的持续时间和缓动函数。

这些属性、持续时间和缓动函数的选择取决于你希望实现的具体动画效果和用户体验。通过调整这些值，你可以创建不同速度和效果的过渡动画。

4. 示例和演示

假设你有一个按钮，当用户悬停在按钮上时，你想要实现一个颜色和宽度的平滑过渡效果，以提高用户界面的交互性。

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>CSS Transition示例</title>
</head>
<body>
  <button class="transition-button">悬停我</button>
</body>
</html>

CSS样式（styles.css）：

.transition-button {
  width: 100px;
  height: 40px;
  background-color: #3498db;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, width 0.3s ease;
}

.transition-button:hover {
  background-color: #e74c3c;
  width: 120px;
}

在这个示例中，有一个按钮元素，带有一个transition-button类，当悬停在按钮上时，背景颜色从蓝色平滑过渡到红色，同时宽度从100px平滑过渡到120px。

三、CSS Keyframes Animation

1. 什么是CSS关键帧动画？

CSS关键帧动画是一种强大的CSS技术，允许你创建复杂的、连续的动画序列。
与CSS Transition不同，关键帧动画允许你在动画序列中定义多个关键帧，从而更精确地控制动画的每一步。

2. 使用@keyframes规则创建动画序列

使用@keyframes规则来创建关键帧动画序列。
在关键帧中，你可以定义元素在不同时间点的状态，以及在这些时间点之间如何过渡。
通过将关键帧绑定到元素的CSS规则中，你可以触发动画效果。

使用@keyframes规则创建动画序列是CSS中创建复杂动画的关键步骤之一。以下是详细介绍如何使用@keyframes规则来定义动画序列的过程：

创建关键帧规则： 首先，你需要使用@keyframes规则来创建一个动画序列。一个典型的@keyframes规则由以下部分组成：
- @keyframes关键字：这是规则的开始。
- 动画名称：你为动画序列取一个名称，以便在后面的CSS规则中引用。
- 花括号{}：在花括号内，你将定义动画序列的各个关键帧。
示例：
```
@keyframes slide {
  /* 关键帧规则将在这里定义 */
}
```
定义关键帧： 在@keyframes规则内，你可以定义多个关键帧，每个关键帧代表动画在不同时间点的状态。关键帧使用百分比值来表示时间进度，从0%到100%。

示例：
```
@keyframes slide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(200px);
    opacity: 0;
  }
}
```
在上面的示例中，我们定义了三个关键帧，分别在动画开始（0%）、中间（50%）和结束（100%）时定义了元素的不同状态。
应用动画规则： 一旦你定义了关键帧规则，你可以将它们应用到元素的CSS规则中，以触发动画效果。

示例：
```
.element {
  animation: slide 2s ease-in-out 1s infinite alternate;
}
```
在这个示例中，我们将名为slide的动画规则应用到了一个类为.element的HTML元素上。我们指定了动画的名称、持续时间、缓动函数、延迟和重复次数等属性。

3. 控制动画的持续时间、延迟和重复

控制动画的持续时间、延迟和重复是CSS动画中的关键概念，允许你精确控制动画的时长、何时开始以及动画的重复次数。以下是对这些概念的详细介绍：

持续时间（Duration）： 持续时间定义了动画从开始到结束所需的时间。你可以使用秒（s）或毫秒（ms）作为单位来指定持续时间。
- 以秒为单位：在动画属性中，使用秒作为持续时间的单位，如 animation: slide 2s;，表示动画将在2秒内完成。
- 以毫秒为单位：你也可以使用毫秒，如 animation: slide 2000ms;，这表示相同的2秒持续时间。
示例：
```
.element {
  animation: slide 2s;
}
```
延迟（Delay）： 延迟定义了动画何时开始播放。它允许你在页面加载后一段时间后再开始动画。同样，你可以使用秒或毫秒来指定延迟时间。
- 以秒为单位：animation-delay属性可以设置延迟的秒数。
- 以毫秒为单位：你也可以使用毫秒，如 animation-delay: 1000ms;，表示1秒的延迟。
示例：
```
.element {
  animation: slide 2s 1s;
}
```
在这个示例中，动画将在加载后等待1秒（1000毫秒）开始播放。
重复（Iteration Count）： 重复属性定义了动画应该播放多少次。你可以使用整数值或关键字来设置重复次数。
- 整数值：你可以直接指定动画的重复次数，如 animation-iteration-count: 3;，这表示动画将播放3次。
- 关键字：你也可以使用关键字来设置重复次数，如 infinite，这表示无限重复。
示例：
```
.element {
  animation: slide 2s 1s infinite;
}
```
在这个示例中，动画将以2秒的持续时间，1秒的延迟，并且无限次地重复播放。

通过控制持续时间、延迟和重复次数，可以根据需求创建出各种不同类型的动画效果。这些属性可以帮助精确地控制动画的时序和行为，以创造出吸引人的用户界面交互效果。

4. 示例和演示

创建一个简单的跳动动画

在这个示例中，我们将创建一个简单的跳动动画，使一个元素在屏幕上跳跃两次。我们将使用@keyframes规则来定义动画序列，并将其应用到一个HTML元素上。

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>CSS Keyframes Animation示例</title>
</head>
<body>
  <div class="jumping-element"></div>
</body>
</html>

CSS样式（styles.css）：

/* 定义关键帧动画 */
@keyframes jump {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-50px);
  }
  60% {
    transform: translateY(-30px);
  }
}

/* 应用关键帧动画到元素 */
.jumping-element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: jump 2s ease-in-out infinite;
}

在这个示例中：

我们定义了一个名为jump的关键帧动画，它包含了多个关键帧，用于描述元素在不同时间点的位置（在垂直方向上上下跳跃）。
我们将这个动画应用到类为.jumping-element的<div>元素上，使其每2秒循环一次。

演示：
- 打开HTML文件，查看页面上的蓝色正方形。
- 正方形将以2秒的持续时间、以缓入缓出的方式，在垂直方向上跳跃。
- 动画会无限循环，使元素不断跳跃。

这个跳动动画示例演示了如何在CSS中定义元素的动态行为，以及如何控制动画的持续时间、缓动函数和重复次数。

四、高级动画技巧

1. 利用CSS动画创建更复杂的效果

CSS动画不仅可以实现基本的过渡和变换，还可以创建更复杂的效果，如旋转、缩放、透视等。可以组合不同的变换来实现复杂的动画。
示例：创建一个元素，当鼠标悬停在它上面时，它将以旋转、缩放和淡入淡出的组合动画效果逐渐显示。

.complex-animation-element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform-origin: center;
  animation: complexAnimation 2s ease-in-out;
}
@keyframes complexAnimation {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

演示：当鼠标悬停在元素上方时，元素将以复杂的动画效果逐渐显示出来。

2. 制作循环动画

CSS动画允许创建循环动画，使动画效果一遍又一遍地重复播放。可以使用animation-iteration-count属性来设置重复次数，或者使用infinite关键字来表示无限重复。
示例：创建一个元素，使其以水平方向上往返移动，并无限重复此过程。

.looping-animation-element {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  animation: moveLeftAndRight 2s linear infinite alternate;
}
@keyframes moveLeftAndRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

演示：元素将以2秒的周期在水平方向上往返移动，并不断重复此过程。

3. 动画暂停和恢复

通过CSS或JavaScript，可以实现动画的暂停和恢复功能，以控制动画的播放状态。可以使用animation-play-state属性来控制动画的播放状态。
示例：创建一个按钮，点击按钮时可以暂停或恢复一个正在运行的动画。

.animation-control-button {
  cursor: pointer;
}
.paused-animation-element {
  animation-play-state: paused;
}

const element = document.querySelector('.looping-animation-element');
const button = document.querySelector('.animation-control-button');
let isPaused = false;
button.addEventListener('click', () => {
  if (isPaused) {
    element.classList.remove('paused-animation-element');
  } else {
    element.classList.add('paused-animation-element');
  }
  isPaused = !isPaused;
});

演示：创建一个动画元素和一个按钮，点击按钮可以暂停或恢复动画的播放状态。

4. 动画性能优化建议

使用transform和opacity进行动画：
- 避免使用left、top、margin等属性来进行动画，因为这些属性会导致浏览器进行重排（reflow）操作，性能开销较大。
- 相反，使用transform属性来进行位移、旋转、缩放等变换，使用opacity来控制透明度。这样可以充分利用硬件加速，减少性能开销。
使用硬件加速：
- 当使用transform和opacity属性时，浏览器会尝试使用硬件加速来优化动画性能。
- 使用will-change属性来明确告诉浏览器哪些属性将被动画化，以提前准备硬件加速。
```
.element {
  will-change: transform, opacity;
}
```
避免频繁的重绘：
- 避免在短时间内频繁修改动画元素的样式，这会导致浏览器进行过多的重绘。
- 如果需要连续的样式变化，考虑将它们合并为一个帧内的单一操作，以减少性能开销。
使用requestAnimationFrame进行动画：
- 使用requestAnimationFrame代替setTimeout或setInterval来执行动画帧。
- requestAnimationFrame会在浏览器下一次重绘前执行，以确保动画在最佳时机渲染。
```
function animate() {
  // 执行动画逻辑
  requestAnimationFrame(animate);
}
animate();
```
避免不必要的动画：
- 仔细考虑是否需要动画来实现特定效果。避免不必要的动画，以降低性能负担。
- 当用户无法感知到或不关心某个动画效果时，考虑将其禁用。
优化透明度动画：
- 透明度动画通常较为昂贵，因为它们涉及像素的混合和复合操作。尽量避免在大量元素上使用透明度动画。
- 如果需要透明度动画，尽量将其应用到能够进行硬件加速的元素上。
减小动画元素的复杂性：
- 减小动画元素的复杂性，包括减少元素的数量、复杂的层叠关系以及高分辨率的图像。
- 使用CSS属性will-change来提前告诉浏览器哪些属性将被动画化，以提高性能。

通过遵循这些动画性能优化建议，可以确保CSS动画在各种设备和浏览器上都能以高性能运行，提供流畅的用户体验。不仅可以减少卡顿和闪烁，还可以降低CPU和GPU的负载，延长设备的电池寿命。

五、交互式动画

交互式动画是一种吸引用户的强大方式，它可以增加网站或应用的交互性。

1. 利用伪类（pseudo-class）和JavaScript实现交互式CSS动画

使用伪类和JavaScript可以根据用户的交互行为，改变元素的样式和状态，从而实现交互式CSS动画。
伪类如:hover用于悬停效果，而JavaScript用于更复杂的交互，例如点击触发动画。

利用伪类实现悬停效果：
- 伪类是CSS中的一种强大工具，可以根据用户的交互状态来改变元素的样式。在悬停（hover）状态下，你可以改变元素的外观，例如改变颜色、大小或透明度。
- 示例：创建一个按钮，当鼠标悬停在按钮上时，按钮的背景颜色会渐变变为蓝色。
```
.hover-effect-button {
  background-color: red;
  transition: background-color 0.3s ease;
}

.hover-effect-button:hover {
  background-color: blue;
}
```
- 演示：当鼠标悬停在按钮上时，按钮的颜色将平滑地从红色变为蓝色。

使用JavaScript触发动画：

JavaScript可以用来处理更复杂的交互，例如点击按钮后触发动画。你可以监听元素上的事件，然后根据事件触发动画。
示例：创建一个按钮，当点击按钮时，元素将旋转并改变颜色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>交互式动画示例</title>
</head>
<body>
  <div class="interactive-element"></div>
  <button id="animate-button">触发动画</button>
  <script src="script.js"></script>
</body>
</html>

.interactive-element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

const element = document.querySelector('.interactive-element');
const animateButton = document.getElementById('animate-button');
let isRotated = false;

animateButton.addEventListener('click', () => {
  if (isRotated) {
    element.style.transform = 'rotate(0deg)';
    element.style.backgroundColor = '#3498db';
  } else {
    element.style.transform = 'rotate(45deg)';
    element.style.backgroundColor = '#e74c3c';
  }
  isRotated = !isRotated;
});

演示：点击按钮后，元素将旋转并改变颜色，再次点击将恢复原始状态。

伪类用于悬停效果，而JavaScript用于更复杂的交互，如点击触发动画。这些技巧可以帮助增强用户界面的互动性，提升用户体验。

六、CSS动画的浏览器支持和兼容性

CSS动画在现代浏览器中得到广泛支持，但仍然需要考虑跨浏览器兼容性问题。

1. CSS动画的浏览器支持情况

Chrome：CSS动画在Chrome中获得了很好的支持，几乎所有的特性都可以正常运行。
Firefox：Firefox也支持大多数CSS动画特性，但某些高级特性可能需要使用前缀。
Safari：Safari对CSS动画的支持也很好，但需要注意一些细节，尤其是在移动设备上。
Edge：Edge浏览器也支持CSS动画，但与其他浏览器的一些行为可能稍有不同。
Internet Explorer：在Internet Explorer 11及更早版本中，对CSS动画的支持相对较弱。某些高级特性可能无法正常工作。

CSS 动画特性	Chrome	Firefox	Safari	Edge	Internet Explorer
@keyframes 关键帧动画	支持	支持	支持	支持	11+
transition 过渡动画	支持	支持	支持	支持	10+
transform 变换	支持	支持	支持	支持	10+
animation 属性	支持	支持	支持	支持	11+
@supports 条件规则	支持	支持	支持	支持	不支持
will-change 属性	支持	支持	支持	支持	不支持

2. 处理跨浏览器兼容性问题的方法

使用前缀：在CSS中使用供应商前缀（如 -webkit-、-moz-、-ms- 等）来确保特性在不同浏览器中正常运行。例如：
```
.element {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg); /* 用于Chrome和Safari */
}
```

检测浏览器：使用JavaScript来检测用户的浏览器，并根据浏览器类型加载不同的CSS文件或应用不同的样式。

if (navigator.userAgent.indexOf('MSIE') !== -1) {
  // 处理Internet Explorer
} else if (navigator.userAgent.indexOf('Firefox') !== -1) {
  // 处理Firefox
} else {
  // 处理其他浏览器
}

使用工具库或框架：使用现有的CSS动画库（如Animate.css、GSAP等）或CSS框架（如Bootstrap、Foundation等）来简化跨浏览器兼容性问题的处理。
渐进增强：从基本功能开始，然后逐渐引入更复杂的特性，以确保在不支持某些特性的浏览器中仍然提供基本功能。
测试和调试：使用浏览器的开发者工具来检查和调试CSS动画，确保其在各种浏览器和屏幕尺寸下都正常工作。
文档和参考：参考W3C规范和MDN等资源，以了解不同CSS特性的浏览器支持情况和最佳实践。

总之，虽然现代浏览器对CSS动画提供了广泛的支持，但为了确保在不同浏览器中获得一致的体验，开发者仍然需要关注跨浏览器兼容性问题。使用前缀、检测浏览器、工具库和框架以及渐进增强等方法都可以帮助处理这些问题。同时，不断测试和调试也是确保CSS动画在各种环境中正常工作的关键。

七、资源和进一步学习

1. 推荐的CSS动画资源和工具

CSS-Tricks：CSS-Tricks是一个综合性的前端开发博客，提供了大量有关CSS动画、布局和交互设计的教程、文章和示例。他们的CSS Almanac部分对CSS属性有详细的解释和示例。
MDN Web文档：MDN（Mozilla Developer Network）是权威的Web技术文档资源，包括了关于CSS动画的详尽文档和示例。这是一个非常可靠的参考源。
CodePen：CodePen是一个社区驱动的在线代码编辑器，你可以在这里浏览和fork其他人的CSS动画示例，以及创建自己的动画实验。
Animate.css：Animate.css是一个轻量级的CSS动画库，它提供了一系列预定义的CSS类，可以帮助你轻松地添加动画效果到你的元素中，无需编写大量的CSS代码。
GreenSock Animation Platform（GSAP）：GSAP是一个强大的JavaScript动画库，它被广泛用于创建高性能、复杂的CSS动画和序列。他们的官方文档和论坛是学习的好资源。
Web动画API：Web动画API是一种用于控制和操作CSS动画的JavaScript API，它提供了更高级的动画控制，可以在一些复杂的动画场景中非常有用。

2. 建议的进一步学习路径

当介绍CSS动画的建议进一步学习路径时，你可以提供更详细的指导，以帮助参与者深入学习这一主题并提高他们的技能水平。以下是关于CSS动画进一步学习的详细建议路径：

CSS动画建议的进一步学习路径

深入学习CSS动画属性和特性：
- @keyframes 关键帧动画：了解如何创建和使用关键帧动画，以及如何定义动画序列中的关键帧。
- transition 过渡动画：深入研究过渡属性，包括过渡的属性、持续时间和缓动函数，以及如何实现平滑的过渡效果。
- transform 变换：学习如何使用transform属性来改变元素的位置、大小、旋转和斜切等变换效果。
- animation 属性：深入了解animation属性，包括动画名称、持续时间、延迟、重复和方向等属性的使用。
学习JavaScript与CSS动画的结合：
- DOM操作：掌握如何使用JavaScript操作文档对象模型（DOM），以便在动画中动态更改元素属性。
- 事件处理：了解如何使用事件处理程序来触发和控制CSS动画，例如点击、悬停或滚动等事件。
- 动画控制：学习如何使用JavaScript来启动、暂停、恢复和停止CSS动画，以实现更高级的交互式效果。

Zarathusa

关注

27
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS动画技术（css-animation）

CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
复制链接

扫一扫