1，transition
1.1 transition的含义
transition是css的一个过渡属性；它可以允许一个元素的css属性值在一段时间内平滑的过渡到另一个值，但是transition的过渡效果必须通过触发事件才会触发效果，比如：hover,focus,click事件等。
1.2 transition的使用方法
transition : transition-property transition-duration transition-timing-function transition-delay;
a.transition-property(需变换的属性)
执行哪个属性需要过渡效果。
- all即所有的属性都执行过渡效果，为默认取值。
- none即无属性执行过渡效果。
- 元素的某一个属性取值，如：background，height等等
b.transition-duration(过渡效果的执行时间)
执行css过渡效果所花费的时间，取值单位为秒(s)或者毫秒(ms)。
c.transition-timing-function(执行过渡效果的变化速率)
在执行css过渡效果的进程中，改变属性值发生变换的变换速率。取值有：
- ease(逐渐变慢)
- ease-in(加速)
- ease-out(减速)
- ease-in-out(先加速然后减速)
- linear(匀速)
- cubic-bezier(自定义速度曲线)
（为了方便理解）具体速度曲线表示如下：
c.transition-delay(延迟执行过渡效果时间)
指定css过渡效果开始发生的延迟时间。
注意：当我们需要改变多个css属性值的时候，只需要将transition串在一起，之间需要用逗号隔开即可。例如：transition:height 1s ease 0.1s,width 1s ease-in-out 0.2s;另外各大浏览器还不支持其w3c的标准写法，所以有需要在transition加上各浏览器的前缀。
2，transform
2.1 transform的含义
transform的含义即为变换。transform的变换基于该元素的中心点,X轴以及Y轴产生变换。
所有元素都有它的中心点，中心点默认为X轴与Y轴的交点；我们可以通过transform-origin来设置旋转元素的中心点位置。语法：transform-origin:x-axis y-axis z-axis; （为了方便理解）X轴，Y轴以及中心点具体如下：
有了这个概念，下面再来说tansform-origin的取值
2.2 transform常用属性的介绍
2.2.1 rotate(* deg):围绕中心点2D旋转,deg为旋转度数
- deg的值可以为正数也可以为负数，为正数则表示根据中心点顺时针旋转，反之为逆时针旋转。*
代码和效果图分别如下所示：
div1{transform:rotate(30deg)} div2{transform:rotate(-30deg)}
2.2.2 translate(x,y):移动
translate有三种情况,第一种即translate(100px,50px)即同时沿着X轴的方向移动100px和Y轴的方向移动50px，translateX(50px)为元素仅仅在X轴移动50px，同理translateY(50px)为在Y轴移动50px;当取值为负数时，即为按移动轴的反方向去移动；
具体代码和效果图如下所示：
transform:translate(200px,100px);
transform:translateX(120px);
transform:translateY(120px);
2.2.3 scale：缩放
scale有三种情况,第一种scale(0.5,0.5)即元素在水平方向和垂直方向同时缩放0.5倍；第二种scaleX(0.5)表示单独在水平方向缩放0.5倍；第三种scaleY(0.5)表示单独在垂直方向缩放0.5倍。scale缩放的取值的基数为1，1表示保持元素当前比例，如果取值大于1则表示元素放大，小于1表示缩小；
具体代码和效果图如下所示：
transform:scale(1.5)
transform:scale(0.5)
2.2.4 skew(* deg,*deg)：倾斜
skew有三种情况，第一种skew( deg,* deg)即该元素按给定的角度在x轴和y轴发生斜切变换;skewX(* deg)即元素按给定的角度在x轴发生斜切变换；skewY(* deg)即元素按给定的角度在y轴发生斜切变换;当skew中只填写一个值即水平方向的斜切变换；*
具体代码和效果图如下所示：
transform:{skewX(30deg)} //如下所示：
transform:{skewX(-30deg)} //如下所示：
transform:{skewY(30deg)} //如下所示：
transform:{skew(30deg,30deg)} //如下所示：
3，animation
animation有两个关键：animation本身的属性值；keyframes的写法;
3.1 keyframes##
keyframes即是动画实现的过程中每一帧要具体实现的动画效果;keyframes的写法为：@keyframes 动画名 {0%{} 20%{} ...},其中0%可以用from来代替，100%可以用to来代替;
3.2 animation##
animation跟transition有一定的类似性；但是区别主要在于transition必须要通过一些触发条件才可以发生，而animation可以不通过任何事件随着时间的变化来生成动画效果；
- animation-name(动画名称,即keyframes中的动画名)
- animation-duration(动画持续时间)
- animation-time-fuction(动画变化速率)
- animation-delay(动画开始播放的延迟时间)
- animation-iteration-count(动画播放的循环次数，infinite为无数次)
- animation-direction(动画播放的方向)
- animation-play-state(动画播放的状态)
animation-direction:为动画播放的方向，默认值为normal,即动画的播放为从0%自动播放到100%结束；另一个值为alternate交替播放，即从0%播放到100%，然后再从100%播放到0%，反复如此；
animation-play-state:控制动画的播放状态，主要有两个值running和pause，running为默认值即播放，pause为暂停动画播放；如果动画暂停后再设置running，动画会从暂停位播放动画；
参考博客：transition、transform、animation三个属性的使用与区别详解_梁婉玲krysliang的博客-CSDN博客_animation和transition区别
