博客主题访问地址：https://github.com/logan70/logan70.github.io
动画(animation)
兼容性
| IE10+ | Firefox 16+ | Chrome 43+ | Sapafi 9+ | Opera 30+ | Android(-webkit) |
检索或设置对象所应用的动画名称
语法
animation-name: keyframesname | none;
keyframesname : 指定要绑定到选择器的关键帧的名称none : 指定有没有动画（可用于覆盖从级联的动画）.box{
-webkit-animation-name: circle;
animation-name: circle;
}
@keyframes circle {
from {transform: rotateX(0deg); }
to {transform: rotateX(180deg);}
}
- 允许CSS的值在一定时间区间内平滑地过渡
- 在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
兼容性
| IE10+ | Firefox16+ | Chrome26+ | Safari6.1+ | Opera12.1+ |
检索或设置对象中的参与过渡的属性
语法
transition-property: none | all | property;
none ： 没有属性改变all ： 所有属性改变（默认）property ： 元素属性名.box{
-webkit-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
-o-transition-property: transform;
transition-property: transform;
}
让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素
语法
transform : none | <transform-function> [<transform-function>]* ;
默认值
transform : none ;
兼容性
IE12+, Firefox16+, Chrome36+, Safari16+, Opera23+
通过指定的角度参数对原元素指定一个2D rotation (2D旋转)
语法
transform: rotate(<angle>);
angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
.box{
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
}
background-clip : 指定背景绘制区域
语法
background-clip: border-box | padding-box | content-box
兼容性 ： IE9+
.box{ background-clip: padding-box; }
border-radius
一个最多可以指定四个border-*-radius属性的复合属性,这个属性允许你为元素添加圆角边框
语法
border-radius: 1-4 length | %;
兼容性
IE9+, Firefox4+, Safari5+
border-radius: 10px; //四个圆角值相同
border-radius: 5px 5px; //左上和右下、右上和左下
border-radius: 5px 5px 5px; //左上、右上和左下、右下
border-radius: 5px 5px 5px 5px; //左上、右上、右下、左下
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
*elementName.className#idul li概念 ： 只能选择元素的子元素
语法 ： 父元素 > 子元素 (Father > Children)
兼容性 ： IE8+
.header > .item { color : #fff; }