过渡 transition
1、transition-property 过渡的样式
2、transition-duration 运动时间，单位是秒
3、transition-delay 延迟时间
4、transition-timing-function 运动形式
1）ease 先慢后快在慢
2）linear 匀速
3）ease-in 加速
4）ease-out 减速
5）ease-in-out 先快后慢
6）cubic-bezier 贝塞尔曲线
7）steps 逐帧动画
给hover加transition，只有鼠标经过时有过渡，离开后没有
且简写时，两个时间后面的代表延迟
写法
1、先写默认样式
2、再写鼠标经过的样式
3、添加过渡动画
过渡动画做鼠标经过，必然用到定位
动画 animation
1、animation name（名字随意起）
2、@keyframes name（和animation的名字必须一致）
1、transition-property 过渡的样式
2、transition-duration 运动时间，单位是秒
3、transition-delay 延迟时间
4、transition-timing-function 运动形式
1）ease 先慢后快在慢
2）linear 匀速
3）ease-in 加速
4）ease-out 减速
5）ease-in-out 先快后慢
6）cubic-bezier 贝塞尔曲线
7）steps 逐帧动画
5、animation-iteration-count 播放次数
value/infinite（无限播放）
6、animation-direction 播放方向
normal（从头播放）/alternate（偶数次反向播放）
7、元素：hover Canimation-play-state：paused 鼠标经过时暂停
8、animation-fill-mode 控制开始和结束的位置
backwards 开始位置 beyframes 定义的第一帧
forwards 结束位置 beyframes 定义的最后一帧
延迟时间可以给负值，表示提前
转换 transform
1、transform
1）translate 平移，默认沿x轴，单位时像素
2）translate-X x轴，正值往右，负值往左
3）translate-y y轴，正值往上，负值往下
4）translate-z z轴，正值顺时针，负值逆时针
简写
transform：translateX（30px） translateY（30px） translateZ（30px）或者 transform：translate3d（30px，30px，30px）
2、rotate 旋转，单位是deg，默认绕z轴顺时针转
1）rotateX 正值元素wangli，负值元素往外
2）rotateY 正值逆时针，负值顺时针
在2D平面时，当x轴和y轴转到90度的倍数时，元素看不见
当转到90度时，x轴和y轴会调换位置
3、scale 缩放 默认是1，可以给负值，表示先旋转180度，在和默认值比较
scale>1，表示从中心开始整体放大
scale<1，表示从中心开始整体缩小
只给一个value时，宽和高同时放大缩小
4、skew 倾斜，单位是deg，默认x轴倾斜，且没有z轴属性
5、transform-origin 转换的起点（基点）
属性值可以是方向或者像素，且可以为负数
当立方体的中心是基点时，x轴和y轴可以用center，但z轴必须用像素
6、backface-visibility 元素旋转时，背面是否可见
1）visible 默认可见
2）hidden 不可见，只给背面的元素加
7、perspective 景深 数越小，看到的越大，反之相反 景深加给父元素
8、transform-style：perserve-3d 与景深一起使用
9、perspective-orgin
景深的基，可以给方向值，也可以给像素
且必须和景深写在一个元素样式中，不能分开