标签：
列表样式
1.list-style 头部图案 比如：disc实心圆 circle空心圆等
2.list-style-image 自定义头部图案 比如：url（a.jpg）
变形样式（下面是真的要复制黏贴了）
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
transform:translate(50px,200px); /* 最好有前缀 */
transform-origin:任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
translateX()： 指定对象X轴（水平方向）的平移
translateY()： 指定对象Y轴（垂直方向）的平移
rotate()： 指定对象的2D rotation（2D旋转），需先有 <‘ transform-origin ‘> 属性的定义
transform: rotate(45deg); transform-origin:60% 10%;
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
-moz-transform:scale(1,1.5); /* 貌似是倍数 */
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
-moz-transform:skew(30deg,0deg); /* deg是指度数 */
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
-moz-transform:translate3d(30px,60px,20px);/* 我真的搞不懂跟2d平移有什么区别*/
过渡动画（！记得要先申明初始状态和最终状态）
1.transition-property 要过渡的属性 比如： transition-property：all（全部属性）； 或者 transition-property：width，height；
2.transition-duration 过渡的时间 比如 ：transition-duration：.5s ； 0.5s或者 5s
3.transition-timing-function：过渡函数（速度曲线） 比如：
ease:默认值，逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))
linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))
ease-in:加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out:减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1.0))
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)
4.transition-delay 过渡延迟时间 比如.1s或者1s
transition简写规则是 前面的秒数是过渡时间 后面的是过渡延迟时间 除此之外没有限制
自定义动画
1.animation-name 动画（关键帧 当动画播完以后会回归原来状态）名称 比如：aaa bbb（不要用空格和-）
2.@keyframes 关键帧（前缀是@-moz-keyframes这样的）比如：
@keyframes kkk{
0%{color：#000;}
50%{color：#0f0}
100%{color：#ff0;}}
或者：
@keyframes hhh{ from {left: 0; } to {left: 800px; } }
3.animation-duration 动画时间 比如.3s 2s
4.animation-timing-function 动画过渡速度曲线 值同上
5.animation-delay 动画延迟时间 比如：.1s 或者1s
6.animation-iteration-count 动画执行次数 比如2 （2次） iteration（不断重复）
7.animation-direction 动画播放顺序 比如：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
8.animation-play-state 动画状态 比如running运动 或paused暂停
9.animation-fill-mode 动画时间之外的状态 比如：
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
animation简写规则是 名字 过渡时间 延迟时间
标签：
原文地址：http://www.cnblogs.com/zhiwudenengliang/p/5770693.html
