CSS 动画 学习笔记和学习案例

Posted GoldenaArcher

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 动画 学习笔记和学习案例相关的知识，希望对你有一定的参考价值。

CSS 动画 学习笔记和学习案例

动画（Animation）是 CSS3 中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相较于过渡，动画可以实现更多变化、更多控制、连续自动播放等效果。

笔记内容不是很长，所以学习笔记和学习案例整合在一起了。上半部分是学习笔记，一些基础的语法，第二大部分是学习案例，一些应用。

学习案例包括以下几个：

  • 基础的 animation 案例，以及其升级版本（即 transform 做比较困难的功能）
  • 模拟打字机效果输出文字
  • 奔跑的熊（百度浏览器之前的动图）
  • 热点图

笔记

基本使用

  1. 先定义

    @keyframes name {
  /*  下面定义的是动画序列 */
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

    动画序列：

    • 0% 是动画的 开始，100%是动画的 完成。这样的规则就是动画序列
    • 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
    • 动画是 使元素从一种样式逐渐变化为另一种样式的效果，可以任意改变多的 样式、任意多的 次数
    • 用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”, 等同于 0% 和 100%

  2. 再调用

    div {
  width: 200px;
  height: 200px;
  background-color: #eee;
  /* 调用动画 */
  animation-name: name;
  /* 持续时间 */
  animation-duration: seconds;
}

常用属性

  • @keyframes, 规定动画

  • animation, 所有动画属性的简写属性，除了 animation-play-state

  • animation-name, 规定 @keyframes 动画名称，必须

  • animation-duration, 规定动画完成一个周期所花费的时间，必须

  • animation-timing-function, 规定动画的运动曲线，默认是 ease

    有以下几个值：

    • linear

      线性速度

    • ease

      默认，滴塑开始，加速，然后在结束前变慢

    • ease-in

      以低速开始

    • ease-out

      以低速结束

    • ease-in-out

      以低速开始和结束

    • steps

      制定了时间函数中的间隔数量（步长）

  • animation-delay, 规定动画何时开始，默认是 0

  • animation-iteration-count, 规定动画的播放次数，默认是 1，还有 infinite

  • animation-direction, 规定是否在下一周期逆向播放，默认是 normal, alternate 为逆播放

  • animation-play-state, 规定动画是否正在运行或暂停，默认是 running, 还有 pause

  • animation-fill-mode, 规定动画结束后状态，保持 forwards 回到起点 backwards

简写

语法：

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 运动起始或结束状态 */
animation: myfirst 5s linear 2s infinite alternate;

特点：

  • 简写属性里面不包含 animation-play-state
  • 暂停动画：animation-play-state: paused; 经常和 :hover 搭配使用
  • 想要动画走回来，而不是跳回来，应该使用：animation-direction: alternate;
  • 盒子动化结束后，停在结束为止：animation-fill-mode: forwards;

学习案例

学习过程中的 5 个案例

基础案例

基础案例 1

最基础的用法：

slide

代码实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 1 定义动画 */
      @keyframes move {
        /* 开始 */
        0% {
          transform: translateX(0px);
        }
        /* 结束 */
        100% {
          transform: translateX(500px);
        }
      }

      div {
        width: 200px;
        height: 200px;
        background-color: #eee;

        animation-name: move;
        animation-duration: 1s;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

其实基础案例和下面的情况还有点像：

zombie

但是上面的代码使用了 javascript 结合 CSS，而使用 动画(animation) 就可以直接使用 CSS 完成就可以了，这也是 动画 的优点之一。

基础案例升级

这个实现如果依靠 JavaScript 来做的话，也不是不能做，但是位置的移动，线性的变化等要实现起来相对而言就比较复杂，用 CSS 动画来实现来说会简单一些：

animation2

实现原理就是将盒子移动的部分分割为 4 个点，每个点所占据的时间时 25%。第一个点控制盒子移动到右上角，第二个点控制盒子移动到右下角，以此类推。

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 1 定义动画 */
      @keyframes move {
        /* 开始 */
        0% {
          transform: translate(0);
        }
        25% {
          transform: translate(500px, 0);
        }
        50% {
          transform: translate(500px, 500px);
        }
        75% {
          transform: translate(0, 500px);
        }
        /* 结束 */
        100% {
          transform: translate(0);
        }
      }

      div {
        width: 200px;
        height: 200px;
        background-color: #eee;

        animation-name: move;
        animation-duration: 5s;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

打字机效果

用 steps属性 实现的功能：

typer

原理还是挺简单的，一个 step 增加一个字的宽度，这样就会有一个字被显示出来，steps属性 的值取决于字符串的长度。

内容方面，使用 white-space: nowrap; 禁止折行，这样所有的内容都会放在一行，然后用 overflow: hidden; 将隐藏的内容设置为不可见。

实现代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        overflow: hidden;
        height: 1.5em;
        width: 0;
        white-space: nowrap;
        animation: typer 5s steps(13) forwards;
      }
      @keyframes typer {
        0% {
          width: 0;
        }
        100% {
          width: 13em;
        }
      }
    </style>
  </head>
  <body>
    <div>思想决定高度，科技引领未来</div>
  </body>
</html>

奔跑的北极熊

据说是百度浏览器打开页面后出现的动画效果，不过好像现在打不开了……？效果图：

polar-bear

这是用两个动画效果叠加做的，一个用 steps属性去做北极熊奔跑的效果，另外一个做北极熊从左向右奔跑到屏幕中间停止的效果。

说起来这我之前还是用 精灵图+background-position 做的，没学到这招呢。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #aaa;
      }
      div {
        position: absolute;
        width: 200px;
        height: 100px;
        background: url("./bear.png") no-repeat;
        /* 元素可以添加多个动画 */
        animation: bear-running 1s steps(8) infinite, move-middle 5s forwards;
      }
      @keyframes bear-running {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -1600px 0;
        }
      }
      @keyframes move-middle {
        0% {
          left: 0;
        }
        100% {
          left: 50%;
          transform: translateX(-50%);
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

热点图

效果图：

heat-map

原理就是创建四个圈，第一个是中心点常量的圈，其他三个都是使用同样的动画效果，即从中心开始，向外延伸的圆圈。不过三个 div 要设置一下延迟，这样就有向外辐射的感觉。

代码实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .map {
        position: relative;
        width: 747px;
        height: 616px;
        background: url("./map.png") center center;
        background-size: 180%;
      }
      .city {
        position: absolute;
        top: 199px;
        right: 252px;
      }

      .dotted {
        width: 8px;
        height: 8px;
        background-color: red;
        border-radius: 50%;
      }

      .city div[class^="pulse"] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        box-shadow: 0 0 12px red;
        border-radius: 50%;
        animation: pulse 2.1s linear infinite;
      }

      .city div.pulse2 {
        animation-delay: 0.7s;
      }
      .city div.pulse3 {
        animation-delay: 1.4s;
      }

      @keyframes pulse {
        0% {
        }
        70% {
          width: 40px;
          height: 40px;
          opacity: 1;
        }
        100% {
          width: 70px;
          height: 70px;
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <!-- 热力图 -->
    <div class="map">
      <div class="city">
        <div class="dotted"></div>
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
      </div>
    </div>
  </body>
</html>

以上是关于CSS 动画 学习笔记和学习案例的主要内容，如果未能解决你的问题，请参考以下文章

[CSS3] 学习笔记-CSS动画特效

CSS3学习笔记之立体线框球形动画

学完一起做个走马灯吧 - CSS 3D 转换学习笔记&学习案例

精通 CSS 第 8 章 响应式布局 学习笔记

疯狂Java学习笔记（70）-----------挚爱Java

精通 CSS 第 8 章 响应式布局 学习案例