当前位置:首页 » 前端 » 本页

CSS3动画效果之transition In 前端  @2012-02-18 2,104 Vs

CSS3动画效果之transition

写在前篇

刚接触网络的候,对于table而言的页面已经是过去时了,所以当听别人说做前端就是在画table的时候,还是有些诧异!对于搜索引擎“蜘蛛”的友好性而言还是html与css分离最佳。CSS3到来更是加速度了网络的发展,很多使用flash的地方及JS渐渐被CSS3替代,CSS3使页面展开的速度更快、更友好、开发与维护时间成本更低,虽然现在CSS3的实现在各浏览器中并不完全相同或不完全支持,需要分别定义。但相信在CSS3技术成熟的时候互联网将跨进一个新时代

这里讨论的话题是CSS3中的一个属性transition

要学习CSS3的transition 动画效果属性先要了解一些基础。

关于主流浏览器核心(识别前缀)

-webkit-: 基于WebCore 排版引擎和 JSCore 引擎的浏览器,主要有苹果的Safari浏览器、 谷歌的Google Chrome浏览器、搜狗浏览器、傲游3浏览器

-moz-: 基于Gecko引擎的浏览器,有Mozilla FireFox浏览器

-o-: 基于Presto引擎的浏览器,有opera浏览器

-ms-: 基于Trident引擎的浏览器,有IE浏览器、以及国内的一些浏览器像使用较多的的360浏览器(IE9才开支持大部分CSS3属性)

关于transition定义区别于transform

Transition在CSS3中定义为“过渡”或“渐变”为佳,最重要的特点在于时间上的控制,强调过程中的变化。

Transform在CSS3中定义为“变形”或“变换”为佳,最重要的特点在于形状上的控制,强调过变化的结果。

样式的渐进增强与平稳退化一说

在javascript中这一说法非常重要,一定不要让页面中“必须表现出来的内容”依懒于脚本实现。而在CSS中也同样,永远不要让网站的“功能”依赖样式,如果该样式不是浏览器通用的话(也就是说,所有的常用浏览器都支持,CSS3目前来说也一样没有统一)。

也就是说,你可以使用样式增强,比如transition,作为设计增强以提高用户体验度。如果你不使用transition照样能表现而且用户依然能够完成他们的任务,就没问题。

中篇

先来看几个简单的例子(支持CSS3浏览器下查看)

Demo1-link(将鼠标移上去)

变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单还是其它的元素),变换是为页面添加平滑的界面的非常棒的方法。

Demo2-padding(将鼠标移上去)

通过改变padding-left的值去达到移动效果,这里只是简单的演示。

再看下面的例子
CSS菜单比较容易实现,而变换却可以让你给菜单添加下拉的渐渐展开的效果,提高用户体验。

添加动画效果属性的位置

css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠标事件来定义(我们这里只讨论CSS)。

动态伪类 起作用的元素 描述
:link 只有链接 未访问的链接
:visited 只有链接 访问过的链接
:hover 所有元素 鼠标经过元素
:active 所有元素 鼠标点击元素
:active 所有元素 鼠标点击元素
:focus 所有可被选中的元素 元素被选中

transition的基本语法:

通过transition属性和其他css属性(颜色,宽高,位置等等)配合来实现。可以一个属性或多个属性写在一起,用英文字符”,”隔开。

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

完整的写的法如下面所示

transition-property : none | all | [ ] [ '属性1,属性2' ]*;
transition-duration :

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*

transition-delay :

Transition属性解释

Transition属性,分别为property、duration、timing-function、delay。下面来一一介绍,在最后会给出一个简单的实例和使用方法说明。

1. transition-property:property
针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时,则设置property值为background。

2. transition-duration:duration
针对了过渡效果的持续时间。

3. transition-timing-function:timing-function
算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效,有多种特效展示。这里得涉及到一个学术性的话题:貝茲曲線。说实话,我也没搞的太明白,但W3C给出了一张曲线图。

貝茲曲線

介绍下预留的几个特效:

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]其中的cubic-bezier即为貝茲曲線中的绘制方法。先来看上图:

图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。

参考阅读

貝茲曲線:http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

不过css3提供了几个取值:

ease:逐渐慢下来,函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear:线性过度,函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

ease-in:由慢到快,函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

ease-out:由快到慢, 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

ease-in-out:由慢到快在到慢, 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier:特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

后篇

代码演示

1). 过渡单个属性:
  1. transition-property:opacity;
  2. transition-duration:2s;
  3. transition-timing-function:ease-in;
  4. transition-delay:0;
2). 过渡多个属性:
  1. [1]. 上下一一对应型:
  2. transition-property:opacity left;
  3. transition-duration:2s, 4s;
  4. transition-timing-function:ease-in;
  5. transition-delay:0;
  6. 此时:opacity过渡时间为2s,left过渡时间为4s。
  7. ————————————————————–
  8. [2]. 循环对应型:
  9. transition-property:opacity left width height;
  10. transition-duration:2s, 4s;
  11. transition-timing-function:ease-in;
  12. transition-delay:0;
  13. 此时:opacity和width过渡时间为2s,left和height过渡时间为4s。
3). transition简写模式:
  1. transition-property transition-duration transition-timing-function transition-delay
  2. 下面是单个属性写法
  3. -moz-transition:background 0.5s ease-out 0s;
  4. 下面是多个属性写法
  5. -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;
HTML及CSS代码:
  1. a href=”http://www.ihiro.org/” target=”_blank”|ihiro.org”
  2. a{
  3. display:block;
  4. width:160px;
  5. height:30px;
  6. line-height:30px;
  7. text-align:center;
  8. padding:10px;
  9. background:#33589f;
  10. color:#fff;
  11. text-decoration:none;
  12. text-decoration:none;
  13. text-transform:uppercase;
  14. -moz-transition:background 0.2s linear 0s;
  15. }
  16. 只有当鼠标移出后才触发此事件
  17. ————————————————————–
  18. a:hover{
  19. background:#263c7b;
  20. color:#f60;
  21. text-shadow:2px 2px 10px #f00;
  22. 以下代码只有当鼠标移入时才处理
    注:若a:hover中不写transition,则会继承a中的transition
  23. 1. 单个属性
  24. -moz-transition:background 0.5s ease-out 0s;
  25. 2. 多个属性:
  26. -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;
  27. -moz-transition:background 0.5s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
  28. }

参考资料:http://www.qianduan.net/css-transitions-101.htm
转载注明本文地址

(完)



打签» ,   评论» 抢沙发

↓↓↓ 支持我们 ↓↓↓



我说两句 »

Ctrl+Enter

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

搜索

返回顶部