注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

闲谈CSS3动画  

2012-06-19 15:44:06|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

关于CSS3动画

从(http://www.w3.org/Style/CSS/current-work)可以看出,CSS动画涉及的知识点包括 CSS 2D Transformations, CSS 3D Transformations, CSS Transitions, CSS Animations。

Transformation 补充定义了width, height, left, top等之外的一些可用于实现动画的属性,如rotate, scale, skew。
Transition 和 Animation 用于定义动画的过程。其中Transition 可以实现简单的动画;Animation则可以通过设定多个关键帧实现相对复杂的动画。

Can I Use? 兼容性

(数据来自http://caniuse.com/)

 IEFirefoxSafariChromeOpera
CSS 2D Transformno3.53.22.010.5
CSS 3D Transformnono4.* (Mac)nono
CSS Transitionno3.73.22.010.5
CSS Animationnono4.02.0no

可以看到,CSS Animation目前只有Webkit内核浏览器支持,目前只能自己玩玩;而Transition用来做渐进增强则较为合适。

一个简单的例子

需求:让一个div元素在鼠标移上去时变大1倍,旋转180度,且背景由红变蓝。

html code::

<div></div> 

css code::

div {     position: absolute;     left: 100px;     top: 100px;     width: 100px;     height: 100px;     background: red;      /* 定义动画的过程 */     -webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;     -moz-transition:    -moz-transform .5s ease-in, background .5s ease-in;     -o-transition:      -o-transform .5s ease-in, background .5s ease-in;     transition:         transform .5s ease-in, background .5s ease-in; }  div:hover {     /*  定义动画的状态 */     -webkit-transform: rotate(180deg) scale(2);     -moz-transform: rotate(180deg) scale(2);     -o-transform: rotate(180deg) scale(2);     -transform: rotate(180deg) scale(2);     background: blue; } 

demo (http://fiddle.jshell.net/NVErB/show/light/) (no IE)

无奈的浏览器前缀

这是个令人非常痛苦的问题,因为不得不针对每个浏览器copy一遍重复代码。

值得注意的是无前缀的标准代码需放在最后。假如几年后某个属性成为标准,被浏览器默认支持了,这行代码会覆盖前面的定义,使得浏览器可以优先使用他。

稍微复杂点的例子(css3 animation)

需求:让一个div元素在点击后变大1倍,旋转180度,且背景由红变蓝;然后向右移动400px。

源码请查看demo源文件。

demo (http://fiddle.jshell.net/a4r94/show/light/) (Safari, Chrome only)

  评论这张
 
阅读(189)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018