码迷,mamicode.com
首页 > Web开发 > 详细

CSS3:transform translate transition 这些都是什么?

时间:2016-09-05 16:53:40      阅读:340      评论:0      收藏:0      [点我收藏+]

标签:

transform:一个属性名称,即CSS3 2D转换 属性。

translate:一个属性函数,用法是translate(dx,dy)

1 div
2 {
3     transform: translate(50px,100px);
4 }

transition:一个属性名称,添加过渡效果。

1 div
2 {
3     width: 200px;
4     transition: width 2s;
5 }
6 
7 div:hover{
8     width: 300px;
9 }

还有动画animate:

 1 @keyframes myfirst
 2 {
 3     from {background: red;}
 4     to {background: yellow;}
 5 }
 6 
 7 div
 8 {
 9     animation: myfirst 5s;
10 }

把 transform 丢到 keyframe 的 from / to 里面就可以实现炫酷的效果。

CSS3:transform translate transition 这些都是什么?

标签:

原文地址:http://www.cnblogs.com/osimly/p/5842599.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!