首页 > Web开发 > 详细

css 动画 transform transition animation

时间:2016-06-11 14:28:01      阅读:213      评论:0      收藏:0      [点我收藏+]

1.transform 

transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术

-webkit-transform : translate(3em,0);想右移动3em,向下移动0em

-webkit-transform : rotate(30deg);顺时针旋转30度

-webkit-transform : translate(-3em,1em);向左移动3em,向下移动1em

-webkit-transform : scale(2);尺寸放大两倍

2.transition

tansition 使可以让页面动起来

 -webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out;


3.animation
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
动画
 

css 动画 transform transition animation

原文:http://www.cnblogs.com/zerohu/p/5575214.html

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