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

20
五月
2021

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>
TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员