transition的局限
transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
transition的使用注意
(1)目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。
(2)不是所有的CSS属性都支持transition,完整的列表查看这里,以及具体的效果。
(3)transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。
transition的局限的更多相关文章
- css动画——transition和animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...
- transition和animation动画简介
本文介绍CSS动画的两大组成部分:transition和animation.我不打算给出每一条属性的详尽介绍,那样可以写一本书.这篇文章只是一个简介,帮助初学者了解全貌,同时又是一个快速指南,当你想不 ...
- css3 tranform transition animation
tranform:对象图形变形 tranform的属性包括: 1.none 表示不进行变换: 2.rotate 旋转 transform:rotate(20deg) 旋转 ...
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- animation与transition的简单讲述
CSS动画分为两大组成部分:transition和animation 在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的.也就是说,所有的状态变化,都是即时完成. tran ...
- css3 动画 Transition
CSS Transition 1.1 基本用法 在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的.也就是说,所有的状态变化,都是即时完成. 上面是一个演示,当鼠标放置 ...
- css 动画 transition和animation
本文参考:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 1. transition基本用法: < ...
- 大厂前端带来css3动画transition的使用和介绍全新认识动画
CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体 ...
- CSS3的新属性的一下总结
阮一峰:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 由于自己经常搞混:animation,tran ...
随机推荐
- SAP 锁机制
SAP锁机制一.SAP为什么要设置锁: 1,保持数据的一致性 如果几个用户要访问同样的资源,需要找到一种同步访问的方法去保持数据的一致性.比如说,在航班预订系 统中,需要检查还有没有空座位 ...
- 说说Python多线程中的daemon属性方法
大家看多线程部分的时候肯定看到过daemon这个属性,当我在百度了一圈后也没发现有比较好的解释(或者大家对这个解释都非常清楚),于是自己通过代码和官方介绍了解它,进行了一些总结 给大家一些参考. 首先 ...
- 安装并运行hadoop
本文地址:http://www.cnblogs.com/archimedes/p/run-hadoop.html,转载请注明源地址. 欢迎关注我的个人博客:www.wuyudong.com, 更多云计 ...
- iOS 完美解决 interactivePopGestureRecognizer 卡住的问题
interactivePopGestureRecognizer是iOS7推出的解决VeiwController滑动后退的新功能,虽然很实用,但是坑也很多啊,用过的同学肯定知道问题在哪里,所以具体问题我 ...
- iOS中倒计时
方法一:使用NSTimer来实现(比较适用于发送短信验证码倒计时) 主要是利用NSTimer的scheduledTimerWithTimeInterval方法来每秒执行一次changeTime方法 / ...
- 大家一起和snailren学java-(四)初始化与清理
初始化和清理,是一个生命周期的起始.在java中,对象的初始化和对象的回收是怎样的呢? 在开发c++的时候,有构造器的概念.即对象的创建,首先默认调用构造器进行初始化.在java中也有“构造器”.ja ...
- node.js之看懂package.json依赖库版本控制
金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉.node.js依赖库的版本控制 一般node.js项目会依赖大量第三方module, 那么如何控制modu ...
- 主流Web服务器一览
概念Web服务器是可以向发出请求的浏览器提供文档的程序. 1.服务器是一种被动程序:只有当Internet上运行在其他计算机中的浏览器发出请求时,服务器才会响应. 2.最常用的Web服务器是Apach ...
- Eclipse報錯:Could not find or load main class
代碼正確,但在Eclipse中無法運行,一直報錯: Could not find or load main class
- SQL Server同步复制问题排查方法
1.应用复制的命令时在订阅服务器上找不到该行 解决方法:用系统存储过程sp_browsereplcmds(返回分发数据库中存储的可读版本复制命令的结果集,并将其用作诊断工具. 此存储过程在分发服务器上 ...