transition —— 过渡

定义：css中的transition允许css的属性值在一定的时间区间内平滑地过渡，就是一个属性从一个值过渡到另一个值

作用：可以指定属性发生变换时的切换方式

属性：

1.transition-property（执行变换的属性）
2.transition-duration（执行变换的持续时间）
3.transition-timing-function(变换的速率变化模式)
4.transition-delay(变换延迟时间)

transform —— 变换

定义：就是一个整体的位置（或整体大小）发生变换，transform的所有变换都是围绕着x轴,y轴，中心点来进行变换的

作用：可以指定属性发生变换时的切换方式

属性：

1.rotate（* deg）：围绕中心点2D旋转若干度，单位为deg。
2.translate（x,y）移动
3.scale缩放
4.skew扭曲（倾斜）

animation —— 动画

定义：就是在一段时间内各种属性进行变化从而达到一个动画的效果。

keyframes:是帧的集合,一个动画是帧的集合。keyfram用@keyframs开头。设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

/*@keyframes后跟的是关键帧的名字（可以随便起）*/
  @keyframes text {
            /*from表示动画的开始位置 也可以使用0%*/
            from{
                margin-left: 0;
            }

            /*to动画的结束位置 也可以使用100%*/
            to{
                margin-left: 700px;
            }
        }

属性：

1. animation-name(动画名，也就是keyfram中定义的动画名)
2. animation-duration（动画持续时间）
3. animation-timing-function（动画变化的速率）
4. animation-delay（动画延迟播放的时间）
5. animation-iteration-count（动画循环的次数，infinite是无限次）
6. animation-direction（动画的方向）
7. animation-play-state动画的播放状态