动画二：动画（keyformes）

一、动画的语法及开启

1.动画的语法

开启动画可以指定一个属性发生变化，例如大小，倾斜，位置等

2.动画的开启

a   @keyframes  动画名称{

        form{

          动画开始时的状态

        }

        to{

          动画结束时的状态

        }

      }

b  @keyframes动画名称 {

        0%  {

          margin-left: 0px;

        }

        100% {

          margin-left: 500px;

        }

例如这样：

第一种写法： @keyframes move {

        from {

          background-color: #bfa;

        }

        to {

          background-color: red;

        }

      }

第二种写法：@keyframes move2 {

        0%  {

          margin-left: 0px;

        }

        100% {

          margin-left: 500px;

        }

像这样就做好了一个动画效果，接下来要做的就是给需要这个动画效果的元素引入这个动画效果就可以了，引入的方式也非常简单，引入动画名称就可以了，具体怎么引入接下来也会有提到

二、动画的基本属性及属性值

1. animation-name：动画名称；

之前也提到了，给需要动画效果的元素引入动画的名称就可以了

例：animation-name：move；（当动画名称为move时）

2.animation-duration:时间;

执行动画的时间，单位也可以写秒也可以写毫秒

例：animation-duration:2s;或animation-duration:2000;

3.animation-timing-function: 属性值;

a  ease 先快中间慢后快

b  ease-in 先快后慢

c  ease-out 先慢后快

d  ease-in-out  先慢中间快后慢

e  linear  匀速

f  steps（） 分步运动

例：animation-timing-function: ease-in-out;

4.animation-iteration-count: 数值;

意思是动画的执行次数

例：animation-iteration-count: 3或infinite（无限次）;

5.animation-delay: 秒或毫秒;

意思是动画的延迟时间

例：animation-delay: 2s/2000;

6.animation-direction: alternate;

意思是设置轮流反向播放动画位置

7.设置动画执行完毕后，停留的位置 

animation-fill-mode: forwards;

三、用动画做出行走的小雪人

精灵图：

 

设置内容区的样式：
   div {
        width: 122px;
        height: 180px;
        background-color: pink;
        background-image: url(./111.jpeg);
        animation: xueren 1s steps(4) infinite;
      }
      @keyframes xueren {
        0% {
          background-position: 0px 0px;
        }
        100% {
          background-position: 487px 0px;
        }
      }
内容区：
<div>div>

如图所示：行走的小雪人也就做好了，这是图片所以小雪人不动，有兴趣的小伙伴可以尝试一下，很有意思的