CSS3过渡和动画

例子：

div

{

transform:translate(50px,100px);

-ms-transform:translate(50px,100px);// IE9

-webkit-transform:translate(50px,100px);// Safari and Chrome

-o-transform:translate(50px,100px);//Opera

-moz-transform:translate(50px,100px);//Firefox

}

2D转换：

translate(50px,100px);//元素从其当前位置移动，参数为left和top值

rotate(30deg); //元素顺时针旋转30度

scale(2,4); //元素尺寸增大或减小，参数为宽度和高度，宽度*2，高度*4

skew(30deg,20deg);//元素2D翻转，沿X轴翻转30度，Y轴翻转20度

3D转换：

rotateX(120deg);//元素沿X轴3D旋转120度

rotateY(120deg); //元素沿Y轴3D旋转120度

注意：

1、CSS3变换时可以使用transform-origin:0 0 0;来调整变换是基于哪个点，默认是基于中心点transform-origin:50% 50% 0;

2、使用rotate旋转时，可能会造成部分浏览器出现锯齿的情况，加上translateZ(0)可以解决

元素动画过渡效果：

例子：

div

{

width:100px;

height:50px;

transition:width 2s, height 2s, transform 2s;

}

div:hover

{

width:300px;

height:200px;

transform:rotate(360deg);

}

transition:width 2s linear 3s;//参数依次为属性名、动画时间、速度、延时

规定速度的参数：

匀速：linear

慢-快-慢：ease

慢-快：ease-in

快-慢：ease-out

慢速开始和结束：ease-in-out

动画效果：

例子：

div

{

background-color:red;

position:relative;

animation:myfirst 5s;//规定动画的名称和时长

}

@keyframes myfirst

{

from {background-color:red;}

to {background-color:yellow;}

}

也可以：

@keyframes myfirst

{

0% {background-color:red; left:0px; top:0px;}

25% {background-color:blue; left:200px; top:0px;}

50% {background-color:yellow; left:200px; top:200px;}

75% {background-color:black; left:0px; top:200px;}

100% {background-color:green; left:0px; top:0px;}

}

animation:myfirst 5s linear 2s infinite alternate;

参数依次代表：动画名称、动画时长、速度、延时、次数（默认是1，这里是无限重复）、下一周期逆向播放

注意浏览器支持：

文本创建多列：

column-count:3;//文本分隔为三列

column-gap:40px;//列之间的间隔

column-rule:2px outset #ff0000;//列之间的样式和颜色

用户界面：

div

{

resize:both; //规定该元素可由用户调整大小

overflow:auto;

}

绘制轮廓：

div

{

border:1px solid red;

outline:2px solid red;

outline-offset:10px;//该元素边框外10像素绘制轮廓（轮廓不占用空间）

}