transition语法:

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

transition主要包含四个属性值:执行变换的属性:transition-property;变换延续的时间:transition- duration;在延续时间段,变换的速率变化transition-timing-function;变换延迟时间transition- delay。下面分别来看这四个属性值:

一、transition-property:

语法:

 transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]*

transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值。其对应的类型如下:

1、color: 通过红、绿、蓝和透明度组件变换(每个数值单独处理),如:background-color,border-color,color,outline-color等CSS属性;

2、length:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等属性;

3、percentage:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等属性;

4、integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生,如:outline-offset,z-index等属性;

5、number真实的(浮点型)数值,如:zoom,opacity,font-weight等属性;

6、transform list:详情请参阅:《CSS3 Transform》。

7、rectangle:通过x、 y、 width和height(转为数值)变换,如:crop;

8、visibility:离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility;

9、shadow:作用于color、x、y、和blur(模糊)属性,如:text-shadow;

10、gradient:通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image;

11、paint server (SVG):只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似;

12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化;

13、a shorthand property:如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化。

具体什么CSS属性可以实现transition效果,在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。这里需要提醒一点是,并不是什么属性改变都为触发transition动作效果,比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。

二、transition-duration:

语法:

 transition-duration : <time> [, <time>]*

transition-duration是用来指定元素 转换过程的持续时间,取值:<time>为数值,单位为s(秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。

三、transition-timing-function:

语法:

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

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:

1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);

2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);

3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);

4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);

5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);

6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default。

其他几个属性的示意图:

四、transition-delay:

语法:

 transition-duration : <time> [, <time>]*transition-delay : <time> [, <time>]*

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始 执行transition效果,取 值:<time>为数值,单位为s(秒),它的使用和transition-duration极其相似,也可以作用于所有元素,包 括:before和:after伪元素。 默认大小是”0″,也就是变换立即执行,没有延迟。

有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果,那么我 们只要把几个transition的 声明串 在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:transition-delay与 transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的怭值为 transition-duration第二个为transition-delay。如:

 a {
-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out; }
}

如果你想给元素执行所有transition效果的属性,那么我们还可以利用all属性值来操作,此时他们共享同样的延续时间以及速率变换方式,如:

  {
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

综合上述我们可以给transition一个速记法:transition: <property> <duration> <animation type> <delay>如下图所示:

单词注释:selected property: 选定的属性(all是全部  也可以单独设定背景:background 宽度:width 等)  animation delay: 动画延迟

相对应的一个示例代码:

 p {
-webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;
}

原文地址:http://www.w3cplus.com/content/css3-transition

CSS3中的Transition属性详解(贝赛尔曲线)的更多相关文章

  1. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  2. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

  3. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  4. Android中的windowSoftInputMode属性详解

    这篇文章主要介绍了Android中的windowSoftInputMode属性详解,本文对windowSoftInputMode的9个属性做了详细总结,需要的朋友可以参考下     在前面的一篇文章中 ...

  5. android中xml tools属性详解

    第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...

  6. android中xmlns:tools属性详解

    今天读到一篇总结的非常棒的文章,写的逻辑很清晰也很实用,很少见到如此棒的文章了.就原文转发过来,我把格式给整理了一下,分享给园子里的各位朋友!好久没写博客了,就为2015年的11月留份纪念吧.希望对你 ...

  7. android中xml tools属性详解(转)

    第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...

  8. css3 vw、vh属性详解,以及与%、rem的区别介绍

    最近的项目需求,内嵌电视端显示页面,所以使用到了css3的属性:vw \ vh,遇到一些问题,记录下来 vw.vh是什么? 字面上可以简单理解为,vw (view width),vh(view hei ...

  9. android中布局文件中 layout_weight 的属性详解

    在不同的情况下,layout_weight属性作用是不同的.主要有两种属性: 1.当布局中的控件的尺寸(宽和高)都有指定时,它所表示的该控件在父容器中的比重,及它在父容器中所占的比例,数值越大,比重越 ...

随机推荐

  1. 使用eclipse搭建hadoop开发环境

    下载一个 hadoop-eclipse-plugin-*.jar的eclipse插件,并放在plugins目录下 重启eclipse   打开视象,找“大象” 连接HDFS   success 编程准 ...

  2. Linux刷新DNS缓存

    网上查了下,发现linux刷新dns的缓存方法都是: sudo /etc/init.d/nscd restart 但是在我的机器上,发现提示命令找不到: sudo /etc/init.d/nscd: ...

  3. lintcode-【中等】数飞机

    题目: 给出飞机的起飞和降落时间的列表,用 interval 序列表示. 请计算出天上同时最多有多少架飞机? 样例: 对于每架飞机的起降时间列表:[[1,10],[2,3],[5,8],[4,7]], ...

  4. VBS获得随机数,截图函数

    '获取随机数 Public function randonum() Randomize  randonum = replace(10000*rnd(),".","a&qu ...

  5. PHP超时处理全面总结

    [ 概述 ] 在PHP开发中工作里非常多使用到超时处理到超时的场合,我说几个场景: 1. 异步获取数据如果某个后端数据源获取不成功则跳过,不影响整个页面展现 2. 为了保证Web服务器不会因为当个页面 ...

  6. TCP控制拥塞的四种算法:慢开始,拥塞避免,快重传,快恢复

    我们在开始假定: 1:数据是单方向传递,另一个窗口只发送确认. 2:接收方的缓存足够大,因此发送方的大小的大小由网络的拥塞程度来决定. 一:慢开始算法和拥塞避免算法 发送方会维持一个拥塞窗口,刚开始的 ...

  7. {Reship}{ListView}C# ListView用法详解

    ======================================================================== This aritcle came from http ...

  8. Linux shell之sed

    sed编辑器逐行处理输入,然后把结果发送到屏幕. -i选项:直接作用源文件,源文件将被修改. sed命令和选项: a\ 在当前行后添加一行或多行 c\ 用新文本替换当前行中的文本 d 删除行 i\ 在 ...

  9. 使用虚拟机win7系统遇到问题及解决

    安装VMware并在其中安装win7专业版系统,这里不再赘述.因为...我就是照着百度来的.哈哈 说说使用中遇到的问题. 本来安装成功后,可以很愉快的运行着.后来莫名奇妙的出现了两个问题:1.虚拟机运 ...

  10. ide编辑器

    http://wowubuntu.com/markdown/#editor https://netbeans.org/downloads/start.html?platform=windows& ...