CSS2D旋转、过渡、动画

标签：

2D转换： 

位移：

-webkit-transform:translate(   );

缩放：

-webkit-transform：scale(.像素,.像素);

旋转：

-webkit-transform：rotate(45deg);

-webkit-transform-origin:x px,y px;

斜切：

-webkit-transform：skew(xrad,yrad);

过渡

-webkit-transition:width(针对过渡属性)   4s（过渡周期及时间） ease（过渡效果类型） 2s（延时）

过度类型：

• ：linear线性过渡
• ：ease平滑过渡
• ：ease-in由慢到快过渡
• ：ease-out由快到慢过渡
• :ease-in-out由慢到快再到慢

　动画:animation

@-webkit-keyframes

@-moz-keyframes

@-ms-keyframes

@-o-keyframes　　

@-webkit-keyframes myfirst {
0% {
width: 150px;
}

30% {
width: 300px;                                    
}

50% {
width: 500px;
}

100% {
width: 600px;
}
}

.div1 {
width: 150px;　　　　　　　　　　　　
height: 150px;
background-color: #21bbca;
-moz-animation: myfirst 4s ease infinite（无限循环）;
}

CSS2D旋转、过渡、动画

标签：

原文地址：http://www.cnblogs.com/qyhyq/p/4644087.html