这是我参与「第四届青训营 」笔记创作活动的第10天
介绍
动画是css特性新添加的，很高级，但是较少用到，是为了视觉享受，比如典型的3d特效，非常的炫丽，尤其是控制z轴旋转时体现的3d效果真的很好看
内容
transition
使用动画当然需要用到时间，没有时间将没有意义，transition可以让某些值变化的过程放慢，分为多条件。
transition触发条件较为苛刻，首先是在触发元素上，transition样式必须设立，无论你是inherti还是亲自设计，都必须存在
比较经典的例子是给一个元素添加hover特效的时候，如果transition放到hover里面，那么在该元素失去焦点的时候，颜色变回来的时候不会失去焦点
例子transition:all .2s;
如果要指定多个样式的话，记住必须给每个样式都指定时间
transition
- transition-property
指定过渡属性的名字
- transition-duration
使用的单位有s和ms，可以设置多个时间，每个时间都会对应transition-property上的属性值去
- transition-timing-function
使用的是贝塞尔值函数，该函数使用两个点位四个值来体现不同的变化过程。第一个是第一个点位的x值，第二个是第一个点位的y值
不同的属性名称拥有不同的速度曲线，最后一个干脆自己定义
ease：
ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：
linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：
ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：
ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：
ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier：
特定的 cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P 1和点P 2。所有值需在[0, 1]区域内，否则无效。
在csdn一篇文章中探索了该属性的用法，结果表明x值确实不能超过范围，但是y值可以，并且效果很不错，有一种弹弹的感觉
- transition-delay
指延迟的时间
transform
transform有一个特点就是说会进行层叠（也就是顶替，事实上所有的css样式都会这样），所以要实现多个变化的时候注意要写在同一个transform里面，比如说要scale和tranlslate进行改变
- scale
使用两个值，第一个值表示缩放的x值
第二个值表示缩放的y值
听说还可以3d缩放，但是要3d空间
- matrix
看不懂，跟矩阵有点关系吧
- rotate
旋转，首先你可以选择旋转哪个轴如，x,y,z
turn应该是指一圈，1turn应该就是指一圈，那么旋转的方向按照html的尿性一般都是顺时针旋转
注意单位，使用deg
transfrom:rotate()
- skew
很复杂
- translate
平移属性，在对齐居中的时候经常使用，一般使用left:50%+translate:-50%来进行居中
这里注意translate的单位不仅仅有px，还有vw这些虚拟单位
