transition：width（宽度产生动画）
1 在哪产生动画
2 动画消耗的时间
3 运动曲线
4 延长多长时间才开始执行动画，（不写就不执行）规定过度效果的曲线，默认是ease，多个用，（逗号）隔开，过度属性：transition
圆角： 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
CSS3圆角
CSS3阴影
box-shadow：h-shadow v-shadow blur spread color inset
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
1、盒子透明度表示法：opacity:0.1filter:alpha(opacity=10)（兼容IE）
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线
为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer
Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。
