HTML5基础——20、动画

最新推荐文章于 2025-11-24 09:30:00 发布

原创最新推荐文章于 2025-11-24 09:30:00 发布 · 1.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html #动画

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。
这次来学习一下CSS的动画做法。

一、关键帧动画

为了说明动画的效果，先来画一个小方块：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div></div>
</body>

现在显示了一个红色的小方块。
在这里插入图片描述

1、简单关键帧动画例子

之前学过用transform来做转换，现在就用transform做一个位移动画。
关键帧动画也是写在style里面，用

@keyframes 动画名称

来表示。
比如：

@keyframes move {

  /* 开始状态 */
  0% {
    transform: translateX(0px);
  }

  /* 结束状态 */
  100% {
    transform: translateX(1000px);
  }
}

这里定义了一个叫做move的动画，它指定了在开始的时候，也就是0%的时候，需要移动x坐标到0像素。然后在最后，也就是100%的时候，移动x坐标到1000像素的地方。这里拿transform作为例子，其他属性也同样可以这样设置在关键帧。
定义完move动画之后，就要使用了。在之前定义div的时候，加上animation-name动画名称属性和animation-duration动画时长，现在代码变成这样：

@keyframes move {

  /* 开始状态 */
  0% {
    transform: translateX(0px);
  }

  /* 结束状态 */
  100% {
    transform: translateX(1000px);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: move;
  animation-duration: 2s;
}

运行的时候，就会看到，红色方块从左往右移动了，不过移动一次之后就停止了，并且回到了一开始的位置。
在这里插入图片描述

2、 animation相关属性

上面的小例子用到了animation-name和animation-duration。animation有很多相关的属性：

1. animation-name

动画片段的名称，这是必须的，对应声明好的动画片段名称。

2. animation-duration

一个动画周期的时间，单位一定要写：
s：秒
ms：毫秒

3. animation-timing-function

动画曲线，默认是ease

4. animation-delay

动画延迟开始播放

5. animation-iteration-count

动画播放的次数：
默认是1次
infinite则是无限循环

6. animation-direction

是否在下一个周期时逆向播放，取值：
normal：默认不逆向，
altemate：逆向。

7. animation-play-state

设置动画的状态，取值：
running：默认正在播放
paused：暂停

8. animation-fill-mode

动画结束的时候处于什么状态，取值：
forwards：保持终点
backwards：回起点

知道了这些知识之后，就可以做个简单的例子了：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes rota {

      /* 开始状态 */
      0% {
        transform: rotateY(0deg);
      }

      /* 结束状态 */
      100% {
        transform: rotateY(360deg);
      }
    }

    div {
      width: 100px;
      height: 100px;
      perspective: 500px;
    }

    .azhao {
      width: 100px;
      height: 100px;
      animation-name: rota;
      animation-duration: 0.5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-play-state: paused;
    }

    .azhao:hover {
      animation-play-state: running;
    }
  </style>
</head>

<body>
  <div>
    <img class="azhao" src="img/azhao.png">
  </div>
</body>

这里用到了很多属性，包括必须的名字和时长，还有曲线、无限循环、播放状态的暂停和正常播放。

CSS旋转动画

在鼠标放上去的时候，图片开始旋转，鼠标已开之后，图片会旋转，保留在某个角度。
在这里插入图片描述

刚才的动画例子都是从0%就直接到100%，是为了简单形成循环。其实可以在中途插入多几帧做各种效果，比如25%、50%之类。

3、动画简写

刚才为了调用一个动画，写了很多行动画属性，其实动画属性是可以简写的，通过animation把多个属性写在一行，比如：

.azhao {
  width: 100px;
  height: 100px;
  animation: rota 0.5s linear infinite;
  animation-play-state: paused;
  /* animation-name: rota;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused; */
}

animation后面接：名称 持续时间 曲线 开始时间 次数 是否反方向 起始结束状态

注意的是，animation-play-state不能写在animation里面，需要单独写。

二、序列帧动画

在之前学习过程中，有一个animation-timing-function曲线属性。这里如果曲线是使用step(n)，那么会产生分段的效果，比如：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes move {

      /* 开始状态 */
      0% {
        transform: translateX(0px);
      }

      /* 结束状态 */
      100% {
        transform: translateX(1000px);
      }
    }

    div {
      width: 100px;
      height: 100px;
      perspective: 500px;
    }

    .azhao {
      width: 100px;
      height: 100px;
      animation-name: move;
      animation-duration: 2s;
      animation-timing-function: steps(10);
      animation-iteration-count: infinite;
    }
  </style>
</head>

<body>
  <div>
    <img class="azhao" src="img/azhao.png">
  </div>
</body>

CSS动画step

这里可以看到，移动动画不再是顺滑的往右移动，而是一段一段的移动。
利用step这个特性，我们可以做出一些有用的东西。
比如我准备一张序列帧图片：
在这里插入图片描述

这里有10个数字组成的一个图片，每个格子是50x50像素，整张图片是500x50。
之前学习过，可以通过background-position来移动背景图片，所以我们可以指定一个div显示50x50的大小，然后再通过background-position移动背景图位置，截取每一个格子的内容，做动画显示：

  <style>
    @keyframes numChange {

      /* 开始状态 */
      0% {
        background-position: 0 0;
      }

      /* 结束状态 */
      100% {
        background-position: -500px 0;
      }
    }

    div {
      width: 50px;
      height: 50px;
      transform: translate(100px, 100px);
      background-image: url(img/num.png);
      animation: numChange 2s steps(10) infinite;
    }
  </style>