transition是CSS3新增的动画属性,可以实现属性的平滑过渡,大大提高用户体验,对于多个属性进行过渡的话很多人会这样写

.tr{ transition:all 1s}

很不幸的是如果我只需要对其中一两个而不是全部属性进行过渡话很多人就素手无策了,其实你可以这样写

.tr{ transition-property: width , height; transition-duration:1s , 1s;}

tips:

transition有四个属性,很多人都会遗忘,分别是transition-property,transition-duration,transition-timing-function,transition-delay,尤其是transition-delay,这个可以实现延迟动画

附上transition官方网址:https://www.w3.org/TR/css3-transitions/

如何指定个别属性进行transition过渡的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

    CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transitio ...

  2. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  3. css3的transition过渡

    从*开始样式*,经过指定*时间*后,缓慢过渡到*结束样式* 语法:transition:要变化的属性名 持续时间 速度变化类型 延迟 强调:写在开始样式中 如何实现多个属性同时过渡:2种办法: 1. ...

  4. CSS transition 过渡 详解

    transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...

  5. 【CSS3】transition过渡和animation动画

    转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...

  6. CSS3 transition过渡

    transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...

  7. transition(过渡)

    transition:过渡 渡过渡原理:原始状态a状态-向-最终结束状态b状态 格式:transition: all 1s linear; 过渡的四个参数: 1.参与过渡的属性(属性(width)/a ...

  8. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  9. 在webapp上使用input:file, 指定capture属性调用默许相机,摄像,录音功能

    ## 在webapp上使用input:file, 指定capture属性调用默认相机,摄像,录音功能 在iOS6下开发webapp,使用inputz之file,很有用 <input type=& ...

随机推荐

  1. jQuery静态方法noop,camelCase,nodeName,trim使用和源码分析

    noop方法 jQuery.noop()函数是一个空函数,它什么也不做. 当某些时候你需要传入函数参数,而且希望它什么也不做的时候,你可以使用该函数,也无需再新建一个空的函数. 示例: // 传入一个 ...

  2. 征友记之---前端开发Partner

                                                       简单自述下: 本人前端开发者,深圳一公司在职员工,非出自前端科班,乃自学前端已近两年之久. 受前端 ...

  3. Top 10 Methods for Java Arrays

    作者:X Wang 出处:http://www.programcreek.com/2013/09/top-10-methods-for-java-arrays/ 转载文章,转载请注明作者和出处 The ...

  4. MongoDB-分片片键

    1.分片 分片是什么?分片就是将数据存储在多个机器上.当数据集超过单台服务器的容量,服务器的内存,磁盘IO都会有问题,即超过单台服务器的性能瓶颈.此时有两种解决方案,垂直扩展和水平扩展(分片).    ...

  5. RelativeLayout的位置属性总结

    使用"@id/…"时,所写的id必须在上文中已经定义,不能使用在下文定义的id RelativeLayout的子控件属性总结—— 按照控件之间常规的上下左右依次排列:(指定控件ID ...

  6. Linux启动报错missing operating system

    用UltraISO制作了一个Red Hat Enterprise Linux Server release 5.7系统的U盘启动盘,然后在一台PC上安装,由于安装过程中在干别的事情,有些选项没有细看. ...

  7. .NET应用架构设计—面向查询服务的参数化查询设计(分解业务点,单独配置各自的数据查询契约)

    阅读目录: 1.背景介绍 2.对业务功能点进行逻辑划分(如:A.B.C分别三个业务点) 2.1.配置映射关系,对业务点配置查询契约(构造VS插件方便生成查询契约) 2.2.将配置好的映射策略文件放在调 ...

  8. MyEclipse中没有自动提示如何设置

    步骤: window->Preferences->Java->Editor->Content Assist->Advanced 将该页面上的所有的未打上勾的选项都勾上就可 ...

  9. static

    静态数据成员,用关键字static声明,该类的所有对象维护该成员的同一个拷贝(包括该类派生类的对象,即派生类对象与基类对象共享基类的静态数据成员. 1. Static数据成员必须在类外部定义,且正好定 ...

  10. wubi安装ubuntukylin-14.04

    自ubuntukylin-14.04发布以来一直想体验一下,正好五一休假有了时间,在经历了一番坎坷后终于安装成功.安装环境为Win7家庭高级版,至于采用wubi方式安装,只因Linux水平差和图省事, ...