css动画

css3新增的东西过度，动画，阴影，圆角；transition ： width （宽度产生动画）500ms;
1.在哪产生的动画 ，2.动画消耗的时间 3.运动曲线；4.延长多长时间才开始执行动画，(不写就不直行)
规定过度效果的曲线，默认是 ease; 多个用 ，(逗号)隔开，

过度属性 :transitio;圆角 :border-radius,如果不想写那么多的话就用transition:allisease;transition:allislinear. 匀速；transition:allisease. 开始和结束慢速，中间加速；
transition：allisease-in. 开始的时候慢，越来越快，然后停止；transition:allisease-out. 开始时快，越来越慢，然后停止；transition:alisease-in-out.开始和结束时慢速。。。。如果子元素超出父元素时 :overflow:hidden;rgba(0 ,0, 0,0.5);
半透明；
line-height行高；
margin: 20px,间距20px,info信息tansfrom变形1.位移 ， 2.缩放 ， 3.旋转 ， 4.斜切 ，
1.位移transition(50px，50px) 水平和垂直；
是不会影响文档流的 ，自己动 不会影响下边的；
2.旋转transition:rotate（30deg）沿着z轴旋转 ；
3.缩放transitiion：scale(0.5,0.2) 宽度 高度
4.斜切transition:skew(0,45deg)x轴不动，y轴斜切45度；水平和垂直；margin: 50px(上边距)auto0;元素旋转transfrom:rotate(45deg) 默认是沿着z轴旋转；
transfrom:perspective(800px)rotate(45deg)perspective设置透视距离，经验数 800px，比较符合人眼的透视距离；
transfrom-style：perseve-3d,设置盒子按3d空间显示；
变形中间点div:nthchild{} ;第几个孩子；
transfrom-origin:leftcenter, 设置变形的中心点 (左中)；
transfrom-origin:lefttop,设置变形的中心点 (左上)；
背面可见margin: 上，右，下，左，如果不想变的话 加过度transfom:all500msease;800是经验值 起始角度rotatey(0deg);有透视效果transfrom-style:preserve-3d;设置盒子背面是否可见backface-visibity:hidden;
背面不可见 （隐藏不可见）；
图片翻面时另一张图片animation动画#####多个设置用空格隔开；>animation:moving1sease(运动曲线) 1s(延迟) 5(动的次数 )alternat(是否返回)alternate设置是否返回；
infinite不限次数；
动画运岁动的状态 ： 暂停animation-play-state:paused;动画运动的状态： 运行animation-play-state:running;forwards动画结束最后状态；
both都 起始和结束都设置；
@keyframes创建关键动画时；声明一个动画，给他后面随便起一个名字；
动画一个状态到另一个状态；隐藏 overflow : hidden;相对定位 ：position:relative;
绝对定位 :positiion:absolute;动画定义的关键字:>@keyframes名字{ 起始状态from[ left 0px]终止状态to[ left 0px,]}from开始 ，to结束；
循环一直走 ：infinte;transfrom:scaley;
多帧动画位移动画transfrom:tanslateY(Y轴) 10px;圆角border-ralios: 50px;原路返回 ：alternate;缩放transfrom:scale(0.50.5)box-shadow: 17px(X轴) 13px（Y轴）12px(羽化) 14px(扩展)