一、transition（过渡）

W3C中对transition的描述是：css中的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值。

transition主要包含四个值，transition-property（执行变换的属性），transition-duration（执行变换的持续时间）,transition-timing-function(变换的速率变化模式),transition-delay(变换延迟时间)。

（1）transition-property

这个属性是用来指定元素中哪一个属性执行过渡效果，取值有

none 没有属性需要执行过渡

all 所有属性发生变化（默认值）

indent 元素的某一个属性值

（2）transiton-duration

用来指定元素转换过程的持续时间，单位为s或ms，可以作用域任何元素。默认值为0

（3）transition-timing-function

transition-timing-function允许我们根据时间的推进去改变属性值的变换速率。主要有以下几个取值

ease（逐渐变慢）

linear（匀速）

ease-in（加速）

ease-out（减速）

ease-in-out（加速然后减速）

cubic-bezier（允许自定义一个时间曲线）

（4）transition-delay

用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间执行transition效果。

当我们想要改变不止一个css属性而是改变多个属性的时候，只要把几个transition的声明串在一起，用逗号分隔开，然后定义各自的效果。

transition的连写：

transition: property duration animation type delay

二、transform（变换）

transform就是变换，改变，主要的值有以下几种

transform的所有变换都是围绕着x轴,y轴，中心点来进行变换的

transform主要包含四个值，rotate（旋转），translate（移动），scale（缩放），skew（扭曲/倾斜）

（1）rotate

roate：围绕中心点2D旋转若干度，单位为deg，如果deg为正数则顺时针旋转，如果是负值则逆时针旋转

（2）translate

translate有三种情况，translate(x,y),x轴和y轴同时移动（如果这里只设定一个值，证明x的值和y的值相同，同样的也是x轴和y轴同时移动），translateX(x),沿着x轴移动，translateY(y),沿着y轴移动。

当值为负数时，反方向移动物体，其基点默认为元素 中心点

transform:translate(200px,100px)

（3）scale

缩放和移动是极其相似的，它也是具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是x轴和y轴同时缩放）；scaleX(x)就只是水平方向进行缩放（x轴缩放）；scaleY（y）仅缩放垂直方向（y轴）。但它们具有相同的缩放中心点和技术，其中心点就是元素的中心位置，缩放基数就是1（也就是参数是相对于1的多少倍），如果参数大于1元素就放大，反之元素就缩小。

（4）skew

扭曲在我看来就是拉动四个角，往外拉，在水平方向拉，在垂直方向拉，水平方向和垂直方向同时拉。

三、animation（动画）

动画animation有两个关键

一个是animation本身的属性值，一个是keyframes的写法，keyframes比较简单，我们先来说说这个。

keyframes其实就是帧的集合，为什么这样说呢？

我们在上面看到了transition，发现它其实可以做很多动画对不对？但是有没有发现，transition它只允许在两种状态之间进行过度，没有中间的值。

而我们把一个动画看作是许多个帧的集合，我们可以去设定每个帧的呈现（每个时刻对应的css属性值），这样的动画就有更多的可变性了。

keyfram用@keyframs开头，后面接一个动画名，然后用大括号括起来，在里面写每一个关键帧的属性。 就像下面这样

@keyframes newframes {
 
    0%{
 
    }
 
    100%{
 
    }
 
}

其中0%可以用from来代替，100%可以用to来代替，但是这两个值不能省略，也不能只写0或只写100，否则不会有任何效果。

在0%到100%之间，我们可以设置任意多个关键帧来设定css的样式，从而达到一种动画一直在变化的效果

• animation-name(动画名，也就是keyfram中定义的动画名)

• animation-duration（动画持续时间）

• animation-timing-function（动画变化的速率）

• animation-delay（动画延迟播放的时间）

• animation-iteration-count（动画循环的次数，infinite是无限次）

• animation-direction（动画的方向）

• animation-play-state动画的播放状态

前5个属性值就很简单易懂了。就不再赘述，下面聊聊animation-direction和animation-play-state

animation-direction这个属性是用来指定元素播放的方向，只有两个值，默认值为normal，如果是normal动画每次循环都是向前播放的，也就是每次都是从0%播放到100%。

另一个值是alternate，设定animation-direction为alternate，那么第一次播放到100%后就会从100%播放到0%，如此往返。

animation-play-state主要是用来控制元素动画的播放状态，主要有两个值running和pause，其中running是默认值，就是在播放。而paused就是暂停播放。而当动画暂停播放后，再重新设置为running的时候，就会从原来的位置重新播放。

.animation {
  width: 300px;
  height: 300px;
  position: absolute;
  font-size: 20px;
  color: white;
  background-color: pink;
  animation: newframes 2s ease alternate infinite;
}

@keyframes newframes {
  0% {
    width: 300px;
    height: 300px;
    background-color: pink;
  }

  50% {
    width: 500px;
    height: 500px;
    background-color: cyan;
  }

  100% {
    width: 500px;
    height: 500px;
    background-color: yellowgreen;
  }
}

上述就是这三者的区别，慢慢理解吧~