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. JavaScript下的setTimeout(fn,0)意味着什么?

    近期在研究异步编程的我对于setTimeout之类的东西异常敏感.在SegmentFault上看到了一个问题<关于SetTimeout时间设为0时>:提问者读了一篇文章,原文解释setTi ...

  2. 关于web软件信息安全问题防护资料的整理 (一)

    之前意识到了安全问题的重要性,于是就在网上找了一下安全问题的解决办法(主要是web应用以及政府网站方面的),问了一下同学的公司是怎么保证安全的,跟我说用的是shiro安全机制这个貌似好多公司都在用,网 ...

  3. 2016第16本:TED演讲的秘密

    花0.01元抢购了<得到APP>中的<成甲说书:TED演讲的秘密>,不到30分钟的音频,感觉全是干货,基本不用看原书了.如果在以后的演讲中随便应用几条都可以让演讲水平提升一大截 ...

  4. Android 手机卫士--自定义属性

    在前面的文章中,已经实现了“设置中心”第一栏的功能以及布局 本文地址:http://www.cnblogs.com/wuyudong/p/5936016.html,转载请注明出处. 自定义属性声明 接 ...

  5. listview的ViewHolder优化

    1.自定义listview,首先在activity.xml中插入一个listview,可以用android:divider=""设置分割线颜色样式,android:dividerH ...

  6. 学习Maven之Maven Surefire Plugin(JUnit篇)

    1.maven-surefire-plugin是个什么鬼? 如果你执行过mvn test或者执行其他maven命令时跑了测试用例,你就已经用过maven-surefire-plugin了.maven- ...

  7. C# CompareTo 和 String.Compare

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. 中断ORACLE数据库关闭进程导致错误案例

    昨晚下班的时候,我准备关闭本机的虚拟机上的ORACLE数据库后准备下班,但是由于我SecureCRT开了多个窗口,结果一不小心,疏忽之下在一个生产服务器上执行了shutdown immediate命令 ...

  9. Linux监控工具介绍系列——free

    在Linux系统中,我们查看.监控系统内存使用情况,一般最常用的命令就是free.free命令其实非常简单,参数也非常简单,但是里面很多知识点未必你都掌握了.下面总结一下我所了解的free命令.如有不 ...

  10. sql server之ROW_NUMBER() OVER()取每组的第N行数据

    先看个例子: document_id card_holder_id created_date document_type_id 1 1 2015-7-1 1 2 4 2015-7-2 1 3 4 20 ...