一.转换transform

1.谷歌和Safari需要前缀-webkit-，IE9需要前缀-ms-。

2.2D转换方法：translate(),rotate(),scale(),skew(),matrix()

div{transform: rotate(30deg);-ms-transform: rotate(30deg);		/* IE 9 */-webkit-transform: rotate(30deg);	/* Safari and Chrome */-o-transform: rotate(30deg);		/* Opera */-moz-transform: rotate(30deg);		/* Firefox */}

3.3D转换方法：rotateX(),rotateY().

支持浏览器有：IE10,火狐，谷歌和Safari需要前缀-webkit-，欧朋不支持3D属性。

二.过渡transition

1.支持浏览器：IE10，火狐，谷歌，欧朋

2.transition

div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}

3.属性：

transition-duration：过渡效果花费时间

transition-timing-function：过渡效果时间曲线

transition-delay：规定过渡效果何时开始

三.动画@keyframes

1.支持浏览器：IE10，火狐，欧朋，谷歌和Safari

2.用法

//把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div{animation: myfirst 5s;-moz-animation: myfirst 5s;	/* Firefox */-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */-o-animation: myfirst 5s;	/* Opera */}

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background:red;}

to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}

to {background:yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background:red;}

to {background:yellow;}

}

或者用百分比

@keyframes myfirst{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}@-moz-keyframes myfirst /* Firefox */{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}@-o-keyframes myfirst /* Opera */{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}

 3.属性：

（1）@keyframes：规定动画

（2）animation：动画属性简写，除了animation-play-state

（3）animation-name：动画名称

（4）animation-duration：动画一个周期花费时间层

（5）animation-timing-function：动画速度曲线

（6）animation-delay：动画延迟时间

（7）animation-iteration-count：播放次数

（8）animation-direction：动画是否在下一周期逆向播放

（9）animation-play-state：规定是都正在运行或暂停

（10）animation-fill-mode：规定动画时间之外的状态

div{animation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running;/* Firefox: */-moz-animation-name: myfirst;-moz-animation-duration: 5s;-moz-animation-timing-function: linear;-moz-animation-delay: 2s;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-play-state: running;/* Safari 和 Chrome: */-webkit-animation-name: myfirst;-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;/* Opera: */-o-animation-name: myfirst;-o-animation-duration: 5s;-o-animation-timing-function: linear;-o-animation-delay: 2s;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-o-animation-play-state: running;}

 四.用户界面

1.resize

（1）支持浏览器：火狐，谷歌，safari

（2）

div{resize:both;overflow:auto;}

2.box-sizing

（1）支持浏览器：IE,谷歌，safari，欧朋，火狐需要前缀-moz-。

（2）作用：允许以确切方式定义适应某个区域的具体内容。

（3）

div{box-sizing:border-box;-moz-box-sizing:border-box;	/* Firefox */-webkit-box-sizing:border-box;	/* Safari */width:50%;float:left;}

3.outline-offset

（1）除了IE都支持

（2）对轮廓进行偏移，并在超出边缘的位置绘制轮廓

（3）与边框不同之处：轮廓不占用空间；轮廓可能是非矩形。

（4）

div{border:2px solid black;outline:2px solid red;outline-offset:15px;}