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 ...
随机推荐
- 转:使用vs2013打开VS2015的工程文件的解决方案(适用于大多数vs低版本打开高版本)
http://www.cnblogs.com/WayneLiu/p/5060277.html 前言:重装系统前我使用的是vs2015(有点装*),由于使用2015实在在班上太另类了, 导致我想在其他同 ...
- 在Seismic.NET下用最少的语句写出一个剖面显示程序
用Seismic.NET开发地震剖面显示程序可以节省大量的时间,下面的代码展开了如何用最少的代码显示一个SEGY文件. // 用一行语句把 reader, pipeline, view 和 plot ...
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q35-Q39)
Question 35You have a custom Web Part that is deployed as a sandboxed solution.You need to ensure th ...
- Android Studio 使用小技巧
1.如何打开设置界面? File --> Settings 快捷键 Ctrl + Alt + s 2.修改Java文件字体大小 ? File --> Settings --> E ...
- Android 设计模式一:EIT造型
前言:首先不提造型,我们先来学习公式. 思绪回到于十七世纪中,牛顿提出了简单公式:F=ma:让人们能轻易理解物体运动的复杂<关系>. 再如,于二十世纪初,爱因斯坦发表了简单公式:E=MC平 ...
- AVL树详解
AVL树 参考了:http://www.cppblog.com/cxiaojia/archive/2012/08/20/187776.html 修改了其中的错误,代码实现并亲自验证过. 平衡二叉树(B ...
- sql 存储过程中top 后面跟参数的问题
之前存储过程中有top的情况,都是拼接sql,然后通过exec执行,进行查询结果,很不方便. 今天研究了,原来top后面是可以直接写参数的. 只需要top 后面的参数加上小括号就好了 eg: TOP ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- andorid开发eclipse常见问题
1.报错: BUILD FAILED D:\workspace\ganji\build.xml:144: The following error occurred while executing th ...
- php操作memcache的使用【转】
1.简介 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力.它可以应对任意多个连接, ...