transition、animation和transform

transition，过渡。用于平滑改变css的属性，（如盒子的长宽等，鼠标移入悬浮的时候产生动效的情况。

常用属性

transition-property : 指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration: 指定这个过渡的持续时间
transition-delay: 延迟过渡时间
transition-timing-function: 指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

transform，变换 。常用来实现拉伸，压缩，旋转，偏移等

1.rotate（* deg）：围绕中心点2D旋转若干度，单位为deg。

如果*中的值为正数则顺时针旋转，如果是负值则逆时针旋转

2.translate（x,y）移动

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

当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点

3.scale缩放

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

4.skew扭曲（倾斜）

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

animation，动画， （与transition的区别是，transition只允许在两个状态中切换，而animation可以利用关键帧来实现多个状态，而且transition一定要有一个事件触发才会产生效果。就像是hover，click等。但是animation不需要任何事件的触发也可以随着时间的变化去改变css属性值，从而产生一种动画的效果。）

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

animation-duration（动画持续时间）

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

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

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

animation-direction（动画的方向） alternate播放完之后倒放

animation-play-state动画的播放状态        running | pause