变形

1，旋转--rotate()：以中心为原点旋转，正值顺时针，负值逆时针

#test {
  transform:rotate(20deg);
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 }

2，扭曲--skew()：不会旋转，只改变形状，如长方形变成平行四边形

#test {
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform:skew(45deg);
}

3，缩放--scale()：scale(x,y)，水平与垂直方向，只有一个参数则倍数相同

#test:hover {
  opacity: .5;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
}

4，位移--translate()：translate(x,y)，水平与垂直方向方向

#test {
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}/*水平垂直方向居中*/

5，矩阵--matrix(a,b,c,d,e,f)：含6个值的变换矩阵，用来指定一个2D变换，属性值涉及到数学中的矩阵知识

#test {
  -webkit-transform: matrix(1,0,0,1,100,100);
  transform: matrix(1,0,0,1,100,100);
}/*相当于translate(100px,100px);*/

6，原点--transform-orgin：设置元素中心点，取值（top,bottom,left,right,top left,top right,bottom right,bottom left），默认情况下旋转、扭曲等变形都是基于元素自己中心位置变形的，这个属性可以改变元素中心点

#test {
  -webkit-transform: skew(15deg);
  -moz-transform: skew(15deg);
  transform: skew(15deg);
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  transform-origin: top right;
}/*基于右上角扭曲15度*/

动画

1，过度属性--transtion(property指定过度css属性，duration指定过度完成时间，timing-function指定过度函数，delay指定开始过度的延迟时间)：

div {
  width: 200px;
  height: 200px;
  background: green;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  transition-delay:.18s;
}/*等价于transtion(width,.5s,ease-in,.18s)*/
div:hover {
  width: 400px;
}/*宽度由200变为400*/

多个属性需要过渡时，用逗号隔开如下：

a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

timing-function(过度函数)：ease,linear,ease-in,ease-out,ease-in-out,具体如下图

2，关键帧--keyframes：后紧跟动画名加一对花括号{}，0%->100%可以用from->to表示

@keyframes changecolor{
  0%{
    background: red;
  }
  40%{
    background:orange;
  }
  80%{
    background:green;
  }
  100%{
    background: red;
  }
}
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}

3,调用动画--animation：分别有如下几个属性，其中timing-function与过渡中的timing-function有一样的方法，

animation-name:around;/*动画名*/
animation-duration: 10s;/*动画在这个时间段内完成*/
animation-timing-function: ease;/*动画播放方式*/
animation-delay: 1s;/*动画延迟，在这个时间段后开始*/
animation-iteration-count:infinite;/*动画播放次数，通常为整数，此处意思是无限播放*/
animation-direction:alternate;/*normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；此处是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。*/
animation-play-state:running;/*这个属性应该设在hover下，元素本身的属性设置为paused；意思是让停止的动画在hover的时候播放，不是hover状态停止*/
animation-fill-mode:none;/*设置动画时间外属性，详情如下表*/

animation-fill-mode

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果