【前端】CSS3动画详解

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端

✍CSS3 动画详解与应用

💎1 帧动画概述

在 CSS3 时代到来之前，网页中的动画通常通过 JavaScript 动态地改变元素的样式属性来实现。这种实现方式虽有效，但性能往往欠佳，特别是在复杂动画中显得效率低下。CSS3 的引入使得动画的实现更加简单，同时显著提高了性能和流畅性。

CSS3 提供了一个强大且简洁的工具：animation，它类似于 Flash 中的逐帧动画。逐帧动画的概念与电影胶片相似，通过一系列关键帧的快速连续播放，最终实现顺滑自然的动画效果。相较于 CSS 的 transition 属性只能定义起始和结束状态，CSS3 中的 keyframes 则能够定义动画的多个关键步骤，使动画更为灵活和精细。

💎2 如何定义关键帧

在 CSS3 中，通过 @keyframes 规则来定义关键帧，可以为每个动画创建多个不同的状态节点。

• AnimationName：动画的自定义名称，便于管理和调用。
• Percentage：关键帧在整个动画过程中所处的百分比位置，可以包含多个百分比节点。
• Properties：样式属性声明，例如 color、left、width 等，用于定义节点的样式。

@keyframes myAnimation {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
  }
}

在上述代码中，我们创建了一个名为 myAnimation 的动画，其中有三个关键帧，分别是 from（相当于 0%）、50% 和 to（相当于 100%）。动画从完全透明开始，过渡到半透明并移动位置，最后变得完全不透明。

💎3 动画属性详解

CSS3 提供了一组强大的动画控制属性，通过 animation 简写方式可以一次性设置多个属性。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

🌹3.1 animation-name

animation-name 用于指定动画的名称，可定义多个动画名称，使用逗号分隔。

animation-name: none | IDENT[, none | IDENT] *;
animation-name: myAnimation, fadeIn;

默认值为 none，表示没有指定任何动画。

🌹3.2 animation-duration

animation-duration 用于设置动画的持续时间，单位为秒 (s) 或毫秒 (ms)，默认值为 0。

animation-duration: time>[, time>] *;
animation-duration: 2s, 1s;

这表示 myAnimation 的持续时间是 2 秒，而 fadeIn 持续 1 秒。

🌹3.3 animation-timing-function

animation-timing-function 用于定义动画的过渡方式，控制速度曲线。

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number>, number>, number>, number>) | step-start | step-end;
animation-timing-function: ease, linear, cubic-bezier(0.25, 0.1, 0.25, 1.0);

• ease：默认值，动画缓慢开始和结束，中间加速。
• linear：动画从头到尾的速度保持一致。
• ease-in：动画以缓慢的速度开始。
• ease-out：动画以缓慢的速度结束。
• ease-in-out：动画缓慢开始和结束，中间加速。
• cubic-bezier：自定义贝塞尔曲线，可以精细地控制动画过渡效果。

🌹3.4 animation-delay

animation-delay 设置动画的延迟时间，单位为秒 (s) 或毫秒 (ms)。

animation-delay: time>[, time>] *;
animation-delay: 500ms;

这表示动画将在 500 毫秒后开始。

🌹3.5 animation-direction

animation-direction 用于控制动画的播放方向。

animation-direction: normal|reverse|alternate|alternate-reverse;
animation-direction: alternate;

• normal：正常播放动画。
• reverse：反向播放动画。
• alternate：交替播放，第一次正向，第二次反向，依此类推。
• alternate-reverse：交替播放，第一次反向，第二次正向，依此类推。

🌹3.6 animation-iteration-count

animation-iteration-count 用于指定动画循环的次数，默认值为 1。

animation-iteration-count: 3;
animation-iteration-count: infinite;

animation-iteration-count: infinite;这意味着动画将无限次循环播放。

🌹3.7 animation-play-state

animation-play-state 用于控制动画的播放状态：

animation-play-state: paused|running;
animation-play-state: paused;

• paused：动画暂停。
• running：动画正在播放。

🌹3.8 animation-fill-mode

animation-fill-mode 用于控制动画不播放时，元素应该处于的状态：

animation-fill-mode: none|forwards|backwards|both;
animation-fill-mode: forwards;

💎4 常用动画库介绍

动画库链接：Animate.css 是一个方便的 CSS 动画库，提供多种现成的动画效果。

• 基础用法：通常结合 JavaScript 控制动画的触发条件。
• 阅读源码：了解其实现方式有助于掌握更高级的 CSS 动画技巧。

示例：

link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
div class="animate__animated animate__bounce">动画效果/div>

✍小结

CSS3 动画提供了一种高效且灵活的方式来实现网页元素的动画效果，通过定义关键帧 (@keyframes) 和一系列动画属性（如持续时间、延迟、循环次数等），开发者可以轻松地控制动画的各个细节，使动画更加生动流畅。此外，使用如 Animate.css 这样的动画库，还能快速应用多种现成动画效果，提高开发效率。总的来说，CSS3 动画使网页设计更加丰富、直观，且性能优于传统 JavaScript 实现。