css过度动画

css3新增的东西

过度，动画，阴影，圆角；

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

image.png
image.png

过度属性 : transitio;
圆角 : border - radius ,
如果不想写那么多的话就用 transition : all is ease;
transition : all is linear .  匀速；
transition : all is ease . 开始和结束慢速，中间加速；
transition ：all is ease - in . 开始的时候慢，越来越快，然后停止；
transition : all is ease - out . 开始时快，越来越慢，然后停止；
transition : al is ease-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(上边距) auto 0;
元素旋转
transfrom : rotate(45deg)  默认是沿着z轴旋转；
transfrom : perspective(800px ) rotate(45deg)
perspective 设置透视距离，经验数 800px ，比较符合人眼的透视距离；
transfrom -style ： perseve-3d   ,设置盒子按3d空间显示；
变形中间点
div : nthchild{}  ;第几个孩子；
transfrom-origin:left center, 设置变形的中心点 (左中)；
transfrom-origin:left top,设置变形的中心点 (左上)；
背面可见
margin : 上，右，下，左，
如果不想变的话   加过度  transfom:all 500ms ease;
800是经验值  起始角度   rotatey (0deg);
有透视效果  transfrom -style  : preserve -3d;
设置盒子背面是否可见
backface - visibity : hidden; 背面不可见   （隐藏不可见）；
图片翻面时另一张图片
animation 动画

#####多个设置用空格隔开；
>animation : moving 1s ease(运动曲线) 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.5 0.5)
box-shadow : 17px(X轴) 13px（Y轴）12px(羽化) 14px(扩展) p