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

css 动画 transform transition animation

时间:2016-06-11 14:29:32      阅读:194      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!