王新阳

@keyframes 自定义名称 {
 0% {
  Properties:Properties value;
 }
 Percentage {
  Properties:Properties value;
 }
 100% {
  Properties:Properties value;
 }
}
Percentage的单位是%，不可省略
浏览器兼容性写法：
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
@keyframes

例：
<style>
@-webkit-keyframes wobble{
 0% {
  margin-left: 100px;
  background: green;
 }
 40% {
  margin-left: 150px;
  background: orange;
 }
 60% {
  margin-left: 75px;
  background: blue;
 }
 100% {
  margin-left: 100px;
  background: red;
 }
}
.demo1{
 width: 50px;
 height: 50px;
 margin-left: 100px;
 background: blue;
 -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
 -webkit-animation-duration: 10s;/*动画持续时间*/
 -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
 -webkit-animation-delay: 2s;/*动画延迟时间*/
 -webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/
 -webkit-animation-direction: alternate;/*定义动画方式*/
 /*-webkit-animation:wobble 10s ease-in-out 2s 10 alternate; 合到一行的写法*/
}
</style>
<div class="demo1"></div>

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* 
也可以每个属性单独写：
1、animation-name: none 或 Keyframes创建的动画名（多个动画名用逗号分隔）
2、animation-duration: time 动画播放持续时长，多个用逗号分隔，单位s、ms
3、animation-timing-function 变化速率：linear、ease、ease-in、ease-out、ease-in-out
4、animation-delay 延时
5、animation-iteration-count 动画循环次数，默认为1，infinite无限次
6、animation-direction 动画播放方向，默认normal每次循环向前；alternate偶数次向前，奇数次反向播放
7、animation-play-state 动画播放状态，默认running，paused暂停。此属性基本不用

来源：http://www.w3cplus.com/content/css3-animation

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 

transition主要包含四个属性值：
transition-property 执行变换的属性
transition-duration 变换延续的时间，单位s、ms
transition-timing-function 变化速率：ease变慢、linear匀速、ease-in加速、ease-out减速、ease-in-out
transition-delay 变换延迟时间

例：
transition: all 0.5s ease-in;
transition: all 0.5s ease-in 100ms;
指定属性变化时执行：
transition: background 0.5s ease-in, color 0.3s ease-out;

浏览器兼容写法：
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;

来源：http://www.w3cplus.com/content/css3-transition

text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur >=0) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...
text-shadow:0, 1px 1px #fff;
text-shadow:0 0 20px red;
text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
color:transparent; text-shadow:0 0 5px #f96;
color: transparent;text-shadow:0 0 6px #F96, -1px -1px  #FFF, 1px -1px  #444;
下面是3D效果
text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);

box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径(>=0) 阴影扩展半径 阴影颜色
投影方式：默认不填为外投影，inset为内投影
其他同text-shadow

text-shadow效果见：http://www.w3cplus.com/node/52
box-shadow效果见：http://www.w3cplus.com/content/css3-box-shadow

color:rgba(100%,0,0,0.5)
background-color:rgba(0,0,0,0.5)
border-color:rgba(0,0,0,0.5)
text-shadow:0 2px 1px rgba(255,0,0,0.5)
background-image:-webkit-linear-gradient(top, rgba(255,0,0,0.5), #ff0000)

线性渐变 point: top从上到下、left从左到右、left top左上到右下、top right右上到左下；angle角度
-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
径向渐变-基本不用 point除了线性渐变的值外，径向梯度允许你指定渐变的形状（圆形circle或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）
-radial-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
重复渐变
repeating-radial-gradient
浏览器兼容写法
-webkit-linear-gradient()
-moz-linear-gradient()
-ms-linear-gradient()
-o-linear-gradient()
linear-gradient()
例
background-image:linear-gradient(to top, #000, #fff, #eee);
background-image:-webkit-linear-gradient(top, #000, #fff, #eee);
background-image:-webkit-linear-gradient(30deg, #000, #fff, #eee);

background: -moz-repeating-linear-gradient(-45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
background: -webkit-repeating-linear-gradient(-45deg, #ace, #ace 5px, #f96 5px, #f96 10px);

更复杂的效果见：http://www.w3cplus.com/node/44

2D效果

translate(x, y) 位移
translateX(num) 水平位移
translateY(num) 垂直位移
scale(x, y) 缩放，不改变元素形状
scaleX(num) 水平缩放
scaleY(num) 垂直缩放
rotate(deg) 旋转，正值顺时针旋转，负值逆时针旋转
skew(x, y) 旋转，改变元素形状
skewX(deg) 沿水平轴旋转
skewY(deg) 沿垂直轴旋转

多种效果，不能写多个transform，否则后面的会覆盖前面的效果
transform: translate(100px, -100px) sacle(1.5, 1.5), rotate(180deg);

下面是兼容各种浏览器写法
-moz-transform: scaleY(1.2);
-webkit-transform: scaleY(1.2);
-o-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
transform: scaleY(1.2);

transform 3D详细教程：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

@media print{
	/*以下为打印时载入的CSS代码*/
	.banner, .sidebar{display:none;}
	#wrapper, .main{clear:both;width:100% !important;height:auto !important;}
}

1、开始于center（水平方向）和top（垂直方向）也就是Top → Bottom：
/* Firefox 3.6+ */
background-image:-moz-linear-gradient(top, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background-image:-webkit-linear-gradient(top, #ace, #f96);
/* Opera 11.10+ */
background-image:-o-linear-gradient(top, #ace, #f96);

2、始于left（水平方向）和center（垂直方向）也是就Left → Right：
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(left, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(left, #ace, #f96);
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, #ace, #f96);

3、起始于left（水平方向）和top（垂直方向）:
background-image: -moz-linear-gradient(left top, #ace, #f96);
background-image: -webkit-linear-gradient(left top, #ace, #f96);
background-image: -o-linear-gradient(left top, #ace, #f96);

4、角度(Angle)：
.deg45 {
	background-image: -moz-linear-gradient(45deg, #ace, #f96);
	background-image: -webkit-linear-gradient(45deg, #ace, #f96);
	background-image: -o-linear-gradient(45deg, #ace, #f96);
}

5、变透明+渐变
div{
    background-image:linear-gradient(
        to bottom
        rgba(0,0,0,.6) 0%,
        rgba(0,0,0,.3) 50%,
        rgba(0,0,0,0) 100%
    );
    background-image:-webkit-linear-gradient(
        bottom,
        rgba(0,0,0,.6) 0%,
        rgba(0,0,0,.3) 50%,
        rgba(0,0,0,0) 100%
    );
}

        rgba(0,0,0,0) 50%

        rgba(0,0,0,0) 50%

        rgba(0,0,0,.6) 0%,