动画基础

可用

6.1 @keyframes 规则

CSS 动画 让你用最小的努力创造复杂和流畅的视觉效果。创建 CSS 动画的主要工具就是 @keyframes 规则, 它定义了动画的关键帧和每一帧中应该发生的样式变化。

@keyframes 规则用于创建动画,定义动画执行的不同阶段的 CSS 属性变化。关键帧定义了动画过程中在特定时间点要应用的样式。

语法 1:

@keyframes animation-name {
  from {
    /* 初始样式 */
  }

  to {
     /* 最终样式 */
  }
}

语法 2:

@keyframes animation-name {
  0% {
    /* 初始样式 */
  }

  100% {
     /* 最终样式 */
  }
}

其中:

  • from 对应动画时间的 0%
  • to 对应动画时间的 100%

示例: 平滑改变背景颜色

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Animation Example</title>
    <style>
      @keyframes changeColor {
        from {
          background-color: lightblue;
        }

        to {
          background-color: lightcoral;
        }
      }

      .animated-box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        animation: changeColor 3s infinite;
      }
    </style>
  </head>
  <body>
    <div class="animated-box">Hover over me!</div>
  </body>
</html>

解释:

  • @keyframes changeColor 规则定义了一个将元素背景色从 lightblue 改为 lightcoral 的动画
  • 元素 .animated-box 上的 animation 属性指出 changeColor 动画应持续 3 秒并无限重复

6.2 多个关键帧

你可以使用多个关键帧,通过为中间状态定义样式来创建更复杂的动画。

示例:带颜色变化的对角线移动

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Keyframes Example</title>
    <style>
      @keyframes moveAndChangeColor {
        0% {
          background-color: lightblue;
          transform: translate(0, 0);
        }

        50% {
          background-color: lightgreen;
          transform: translate(100px, 100px);
        }

        100% {
          background-color: lightcoral;
          transform: translate(200px, 0);
        }
      }

      .animated-box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        animation: moveAndChangeColor 5s infinite;
      }
    </style>
  </head>
  <body>
    <div class="animated-box">Watch me move!</div>
  </body>
</html>

解释:

@keyframes moveAndChangeColor 规则定义了一个在三个阶段中改变元素背景色和位置的动画。

  • 在动画的 0% 时,元素是浅蓝色并处于初始位置
  • 在动画的 50% 时,元素是浅绿色并移动 100 像素向右和向下
  • 在动画的 100% 时,元素是浅珊瑚色并向右移动 200 像素

6.3 简单动画示例

示例 1: 脉动效果

创建脉动效果,元素平滑地放大和缩小。

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulsing Effect</title>
    <style>
      @keyframes pulse {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.2);
        }

        100% {
          transform: scale(1);
        }
      }

      .pulse-box {
        width: 150px;
        height: 150px;
        background-color: lightpink;
        animation: pulse 2s infinite;
      }
    </style>
  </head>
  <body>
    <div class="pulse-box">Pulsing</div>
  </body>
</html>

解释:

  • @keyframes pulse 规则定义了一个将元素放大到 120% 然后返回到原始大小的动画
  • 元素 .pulse-box 上的 animation 属性指出 pulse 动画应持续 2 秒并无限重复

示例 2: 旋转

创建一个元素连续旋转的效果:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Effect</title>
    <style>
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      .rotate-box {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        animation: rotate 3s infinite linear;
      }
    </style>
  </head>
  <body>
    <div class="rotate-box">Rotating</div>
  </body>
</html>

解释:

  • @keyframes rotate 规则定义了一个将元素从 0 度旋转到 360 度的动画
  • 元素 .rotate-box 上的 animation 属性指出 rotate 动画应持续 3 秒, 无限重复并以恒定速度 (linear) 进行
1
任务
Frontend SELF ZH,  第 24 级课程 0
已锁定
移动和颜色
移动和颜色
1
任务
Frontend SELF ZH,  第 24 级课程 0
已锁定
脉动
脉动
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论