一、语法

transition: property duration timing-function delay;
描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

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动作效果。

二、浏览器兼容性

IE10以后支持

demo:点击按钮的时候,导航会收起。此时宽度发生变化,通过css3的transition属性,给他一个过渡效果。

三、代码

左侧栏和内容区都需要设置动画,动画时间要一致,这样不会造成因时间不一致而闪动

css3动画属性中的transition属性的更多相关文章

  1. 今天我们来讨论一下CSS3属性中的transition属性;

    transition属性是CSS3属性:顾名思义英文为过渡的意思:主要有四个值与其一一对应:分别是property(CSS属性名称),duration过渡的时长,timimg-function转速曲线 ...

  2. CSS3中的Transition属性详解

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

  3. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  4. css3学习--css3动画详解一(animation属性)

    ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...

  5. ADOquery属性中cursortype,LockType属性

    ADOquery属性中cursortype属性   ctOpenForwardOnly 向前移动    - — 除了只能在记录集中向前移动以外,其它的和动态游标类似.      ctKeyset 键集 ...

  6. CSS3学习之分享下transition属性

    最近在网上看到很多transition写的效果,借鉴http://www.w3school.com.cn分享下代码, 1.语法:transition: property duration timing ...

  7. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  8. css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性

    box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit.其中inherit表示box-sizing ...

  9. CSS3 动画实现 animation 和 transition 比较

    在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...

随机推荐

  1. PHP开发搜索引擎技术全解析

    谈到网页搜索引擎时,很多人都会想到雅虎.的确,雅虎开创了一个互联网络的搜索时代.然而,雅虎目前用于搜索网页的技术却并非该公司原先自己开发的.2000年8月,雅虎采用了Google这家由斯坦福大学学生创 ...

  2. Windows平台下的session0创建进程的问题与解决办法

    很多博客都有记载如何在session0下创建进程的办法,也就是使用CreateProcessAsUser.但是这个要求服务的进程有SE_INCREASE_QUOTA_NAME和SE_ASSIGNPRI ...

  3. android系统平台显示驱动开发简要:LCD驱动调试篇『四』

    平台信息: 内核:linux3.4.39系统:android4.4 平台:S5P4418(cortex a9) 作者:瘋耔(欢迎转载,请注明作者) 欢迎指正错误,共同学习.共同进步!! 关注博主新浪博 ...

  4. ListView中使用type需要注意的东西 java.lang.ArrayIndexOutOfBoundsException: length=2; index=2 addScrapView

    ListView中使用type需要注意的东西 在使用ListView时,如果使用了getItemViewType, 记得他的值一定要是从0开始计数的. 且要覆盖getViewTypeCount方法.并 ...

  5. Innodb引擎 long semaphore waits

    上一篇介绍了因为子表过多,导致innodb crash的情况,但crash的原因是long semaphore waits.long semaphore waits又为何物? 背景:Innodb使用了 ...

  6. poj1226,poj3080

    看来以后用pascal的函数要小心了: 简简单单pos其实时间复杂度是二次方级的…… 今天学习的是KMP——字符匹配算法: 这两道题也都很简单,都是为这个算法练手的, 最朴素的匹配显然是穷举起始位置然 ...

  7. 【jQuery】

    TryjQuery:jQuery官方推出的教学视频http://blog.jobbole.com/37699/ jQuery 1.11 / 2.1 beta 版发布,全面支持异步模块加载  √http ...

  8. centos nginx 多端口配置过程记录

    1. 编辑 /usr/local/nginx/vhosts/  在此目录下增加一文件,如;ci.ainux.com,或复制一个文件 修改其中的端口和目录,更改log_format 名称 重启nginx ...

  9. apache开源项目--OpenMeetings

    OpenMeetings是一个多语言可定制的视频会议和协作系统.它支持音频.视频,能让你查看每个与会者的桌面.OpenMeetings还包含一个白板,通过白板可以导入各种格式的图片和涂鸦. 在线演示: ...

  10. class属性添加多个类

    <html> <head> <style type="text/css"> h1.intro { color:blue; text-align: ...