transition过渡，transform变换

transition 过渡
transition:transition-property transition-duration transition-timing-function transition-delay
transition-property:应用过渡属性的名称
transition-duration:以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画
transition-timing-function:ease,linner等过度时间变化曲线，存在兼容问题
transition-delay:规定在过渡效果开始作用之前需要等待的时间

Transitions可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active或者通过JavaScript实现的状态变化
eg：

css

1
div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}


2
div{height:80px;border:1px solid red;transition:all 1s;background:red;}
div:hover{cursor:pointer;margin-left:50px;background:green;}

transform 变换
旋转，缩放，倾斜或平移元素（只对 block 级元素有效）
rotate()旋转
正角表示顺时针旋转，负角表示逆时针旋转
rotateY():沿着y轴旋转(二维平面看起来就像缩放了一样)
rotateX():沿着x轴旋转(二维平面看起来就像缩放了一样)
rotateY():沿着z轴旋转

.element {
  transform: rotate(25deg);
}//元素沿着自己的中心点顺时针旋转25度

scale()缩放
参数只为一个时，整体缩放
参数为两个时x轴和y轴分别缩放——scale(a,b) a:x; b:y
也可以直接scaleX(),scaleY();单独缩放x和y轴

div{
  width:100px;
  height:80px;
  border:1px solid blue;
  margin:0 auto;transform:scale(.5)
}//缩小为原大小的0.5倍

疑问：为何scale变大之后，不会使下面的元素重新排列(浏览器重新渲染？)，在自己原来的位置上安静缩放（变换之后可能被遮挡，也可能遮挡下面的元素）

skew() 拉伸、倾斜、扭曲
使得在每个方向上扭曲元素上的每个点以一定角度。这是通过将每个坐标增加一个与指定角度成比例的值和到原点的距离来完成的。离原点越远，拉伸的值就越大。
skew(ax)或skew(ax, ay)
skewX():沿横坐标扭曲元素的角度
skewY():沿纵坐标扭曲元素的角度

div{
  width:100px;
  height:80px;
  border:1px solid blue;
  margin:0 auto;
  transform:skewY(25deg)
}

有点抽象，可以看 css-tricks里面的事例(https://css-tricks.com/almanac/properties/t/transform/) (需翻墙)

translate()平移
translate(x,y):x为正时，往右平移；y为正时，往下平移
translateX():参数正负同上
translateY():参数正负同上

div{
  width:100px;
  height:80px;
  border:1px solid blue;
  margin:0 auto;
  transform:translate(200px,-50px)
}

animation动画

未完待续......