今天通过老师讲解重温了transition和transform的用法，并且配合练习，然后将一些比较有代表性的小组件自己收集规整到一个文件夹里面
过渡特效transition
从一个状态缓慢的变化到另一个状态我们称之为过渡。在CSS中用于设置过渡特效的属性叫做“transition”，
该属性允许CSS的属性值在一定的时间区间内平滑地过渡，并能够对CSS中绝大部分属性的变化生效（属性的值一般要为数值类型，但并不是绝对）
transition属性包含多个分支属性，主要有：
“过渡CSS属性名称”、
“过渡执行时间”、
“过渡时间速率曲线”、该属性允许根据时间的推进去改变属性值的变换速率，目前它可以够设置6个类型的值：ease默认值，逐渐减速。linear匀速。ease-in加速。ease-out减速。ease-in-out先加速，后减速。cubic-bezier([参数])设置贝塞尔曲线也能做到时间曲线控制，这参数，可以通过在谷歌浏览器检查并获得。
“过渡的延时执行”
一般而言，四个属性值都是设置在要过渡的元素本身上的。简写方式如下：
例如让一个div的宽度在1s时间内匀速过渡，且延时2s开始:
Transition: width 1s linear 2s
让一个div的高度在3s时间内加速过渡，且延时1s开始:
Transition: height 3s ease-in 1s
让一个div的宽高在4s时间内减速速过渡，且延时2s开始:
Transition: height 3s ease-out 1s
变形转换特效transform
常用到的属性：
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)：定义转换，只是用 X 轴的值。translateY(y)定义转换，只是用 Y 轴的值。translateZ(z)定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)定义 2D 缩放转换。scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。scaleY(y)通过设置 Y 轴的值来定义缩放转换。scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。rotateY(angle)定义沿着 Y 轴的 3D 旋转。rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。
