transform （变形）
包括：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
transition主要包含五个属性值：
transform: rotate | scale | skew | translate |matrix;
transform:rotate(45deg);围绕中心旋转角度
transform-origin：left top 修改旋转中心（默认就是中心点） {left top right bottom}
transform:translate(x,y) 位移距离 translateX(x) translateY(y){三种位移方式}
transform:scale(x,y) 缩放大小 以图形中心点缩放，通过transform-origin设置以某点缩放 transform:scaleX(x) 水平方向缩放 transform:scaleY(y) 垂直方向缩放
transform:skew(10deg,10deg) 一中心点为基点扭曲图像 transform:skewX() 水平方向扭曲 transform:skewY() 垂直方向扭曲
transform:matrix; 矩阵。
transition主要包含四个属性值：
执行变换的属性：transition-property；
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。
变换延续的时间：transition- duration；
transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）或者ms(毫秒)
在延续时间段，变换的速率变化transition-timing-function
transition-timing-function有6个可能值：
1、ease：（逐渐变慢）默认值
2、linear：（匀速），linear 函数
3、ease-in：(加速)，ease-in
4、ease-out：（减速），ease-out
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）贝塞尔曲线。
变换延迟时间transition- delay
transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果
animation主要包含七个属性值：
animation-name: 动画名称；和@keyframes相关联。
animation-duration：
animation-duration是用来指定元素播放动画所持续的时间长(这个属性跟transition中的transition-duration使用方法是一样的)
animation-timing-function:
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。
animation-delay:
animation-delay:是用来指定元素动画开始时间。这个属性和transition-delayy使用方法是一样的。
animation-iteration-count
animation-iteration-count是用来指定元素播放动画的循环次数，默认值为“1”；infinite为无限次数循环。
animation-direction
animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
animation-play-state
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。