首页 > Web开发 > 详细

CSS2D旋转、过渡、动画

时间:2015-07-13 23:40:23      阅读:404      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!