CSS 动画

相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点：

1.能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。

2.动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使 用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。

3.让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。


CSS 动画是网页设计中用于创建动态和交互效果的强大工具，以下是关于 CSS 动画的学习内容：

基本概念

  • 关键帧：CSS 动画通过定义关键帧来描述动画的不同状态。关键帧使用@keyframes规则来创建，它允许你指定动画在不同时间点的属性值。
  • 动画属性：通过一系列 CSS 动画属性来控制动画的行为，包括动画名称、持续时间、播放次数、播放方向、延迟时间等。

    • 主要属性

    @keyframes

  • 语法：@keyframes animationName { keyframe-selector { property: value; } }

  • 描述：用于定义动画的关键帧。animationName是动画的名称，keyframe-selector可以是百分比（如0%、50%、100%）或from、to关键字，用于指定动画在不同时间点的状态。

    • animation-name

  • 语法：animation-name: none | <single-animation-name>#

  • 描述：指定要应用的动画名称，对应@keyframes中定义的名称。

    • animation-duration

  • 语法：animation-duration: <time>#

  • 描述：指定动画完成一个周期所需的时间，以秒（s）或毫秒（ms）为单位。

    • animation-timing-function

  • 语法：animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

  • 描述：控制动画的速度曲线，与过渡的时间函数类似。

    • animation-delay

  • 语法：animation-delay: <time>

  • 描述：指定动画开始前的延迟时间。

    • animation-iteration-count

  • 语法：animation-iteration-count: infinite | <number>

  • 描述：指定动画的播放次数，infinite表示无限循环播放。

    • animation-direction

  • 语法：animation-direction: normal | reverse | alternate | alternate-reverse

  • 描述：控制动画的播放方向，normal为正向播放，reverse为反向播放，alternate表示在奇数次迭代时正向播放，偶数次迭代时反向播放，alternate-reverse则相反。

  • 示例

    • 以下是一个简单的 CSS 动画示例，让一个方块在页面上从左到右移动并旋转：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    /* 定义关键帧 */
    @keyframes moveAndRotate {
      from {
        transform: translateX(0) rotate(0deg);
      }
      to {
        transform: translateX(200px) rotate(360deg);
      }
    }

    /* 应用动画 */
    .box {
      width: 50px;
      height: 50px;
      background-color: blue;
      /* 应用动画属性 */
      animation-name: moveAndRotate;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-direction: normal;
    }

    注意事项

  • 性能考虑：与过渡类似，复杂的动画可能会对性能产生影响，尤其是在移动设备上。尽量避免过度使用动画，或者对大量元素同时应用复杂动画。
  • 兼容性处理：不同浏览器对 CSS 动画的支持可能存在差异，需要使用浏览器前缀来确保在各种浏览器中都能正常显示。例如，-webkit-animation用于 WebKit 内核的浏览器。
  • 可访问性：确保动画不会影响网站的可访问性，例如，对于有视觉障碍的用户，动画可能会造成困扰。可以提供关闭动画的选项，或者确保动画不会干扰用户对内容的理解和操作。