css之css3动画主要介绍了transition补间动画，animation关键帧动画以及逐帧动画。transitio

补间动画

有一个开始和结束状态，中间浏览器就会补一个动画，所以叫补间动画，也叫过渡动画。

位置平移：left right transform
方位：tranfrom 旋转
大小：width transform
透明度：opacity

特点：需要有状态的变化

transition

transfrom不是动画，只是一个属性，但是transform会开启3d渲染加速，会让动画更加细腻，同时不会改变文档流的结构（也就是不会重排和重绘）。这就是它为什么经常和动画transition一起出现的原因。

transition: property duration timing-funciton

时间函数

时间函数就是状态和时间的关系。当一定的时间内，状态变化很大，那么动画的速度就很快，所以时间函数会改变动画的速度，比如刚开始很快，后面变慢等等，这样就可以实现一个缓动。

linear 速度是不变的
ease 开始很慢中间很快最后很慢（ease是缓慢的意思）
ease-in开始很慢结尾很快
ease-out 开始很快结果很慢
ease-in-out 开始很慢中间很快结尾很慢，但是和ease还是有不同的

cubic-bezier

贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

从上图我们需要知道的是 cubic-bezier 的取值范围:

P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)

我们需要关注的是 P1 和 P2 两点的取值，最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯，最后形成的曲线就是动画的速度曲线。

我们可以利用这个网站来模拟速度曲线：https://cubic-bezier.com/

注意：

transition的属性名称不能是display，也就是从display：none 过渡到display：block是不起作用的

transition不跟all 是要把所有的属性要扫描一遍，占用系统资源

关键帧动画

相当于多个补间动画，它不需要有状态的变化。可以把animation是对transition的一个的加强版，能完成很多transition不能完成的功能。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-iteration-count: n/infinite
animation-direction: normal/reverse/alternate
animation-play-state: paused/running 设置这个css属性可以控制动画的暂停与播放

transition需要有个动作来触发状态的变化，但是animation是不需要有个动作来触发状态的变化的

逐帧动画

animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的,但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。

step(number): number表示帧和帧之间有几个状态，在如下的动画中我们只希望有一个状态，所以是steps(1)。

如果设置为step(3)，那么帧和帧之间就有了2个状态，如下图，小圆点和小圆点之间就有2个状态，小圆点和小圆点就表示0% 到 12.5%。0%表示为一帧，12.5%也表示为一帧。

    .container {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        background: url(./animal.png) no-repeat;
        animation: run 1s infinite;
        animation-timing-function: steps(1);
      }
      @keyframes run {
        0% {
          background-position: 0 0;
        }
        12.5% {
          background-position: -100px 0;
        }
        25% {
          background-position: -200px 0;
        }
        37.5% {
          background-position: -300px 0;
        }
        50% {
          background-position: 0 -100px;
        }
        62.5% {
          background-position: -100px -100px;
        }
        75% {
          background-position: -200px -100px;
        }
        87.5% {
          background-position: -300px -100px;
        }
        100% {
          background-position: 0 0;
        }
      }

菊花 loading 效果图

@keyframes loading {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

上面的代码只有两个帧，菊花有12个花瓣，那么要在这两个帧之间把12种状态走一遍，那么就是step(12)

animation: loading 1s infinite steps(12, start);