css动画

Chrome 和 Safari 要求前缀 -webkit- 版本.

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Internet Explorer 9 要求前缀 -ms- 版本.

1.2D  3D  转换

2D：

transform: translate(50px,100px);移动

transform: rotate(30deg);旋转

transform: scale(2,3);放大

transform: skew(30deg,20deg);倾斜旋转

3D：

transform: rotateY(130deg);

transform: rotateX(120deg);

2.过渡

div {
　　width: 100px;
　　height: 100px;
　　background: red;
　　-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
　　transition: width 2s, height 2s, transform 2s;
}

div:hover {
　　width: 200px;
　　height: 200px;
　　-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
　　transform: rotate(180deg);
}

transition-property:width;规定应用过渡的 CSS 属性的名称。
transition-duration:1s;定义过渡效果花费的时间。默认是 0。
transition-timing-function:linear;规定过渡效果的时间曲线。默认是 "ease"。
transition-delay:2s;规定过渡效果何时开始。默认是 0。

3.动画

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

@-webkit-keyframes anim
{
　　0% {background:red; left:0px; top:0px;}
　　25% {background:yellow; left:200px; top:0px;}
　　50% {background:blue; left:200px; top:200px;}
　　75% {background:green; left:0px; top:200px;}
　　100% {background:red; left:0px; top:0px;}
}

animation-name:anim;规定 @keyframes 动画的名称
animation-duration:5s;规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function:linear;规定动画的速度曲线。默认是 "ease"。
animation-delay:2s;规定动画何时开始。默认是 0。
animation-iteration-count:infinite;规定动画被播放的次数。默认是 1
animation-direction:alternate;规定动画是否在下一周期逆向地播放。默认是 "normal"
animation-play-state:running;规定动画是否正在运行或暂停。默认是 "running"

4.多列 瀑布流

-webkit-column-count:3;列数量
-webkit-column-gap:40px;间隙
-webkit-column-rule-style:dotted;样式