Transition 所支持的css属性
transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下:
color
: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color
,color
,outline-color
等css属性;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
等属性;percentage
:真实的数字 如: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
等属性;integer
离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset
,z-index
等属性;number
真实的(浮点型)数值,如:zoom
,opacity
,font-weight
,等属性;transform
listrectangle
:通过x, y, width 和 height(转为数值)变换,如:crop
visibility
: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility
shadow
: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow
gradient
: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image
- paint server (SVG): 只支持下面的情况:从
gradient
到gradient
以及color
到color
,然后工作与上面类似 - space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化
- a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化
Transition 所支持的css属性的更多相关文章
- 十个实用但IE不支持的CSS属性
对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...
- 判断浏览器是否支持某个css属性
方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...
- animate支持的css属性
支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...
- 检测浏览器是否支持某个css属性
以浏览器是否支持translate3d 为例说明,当然现代浏览器已经支持该属性.如果浏览器实现了带有前缀的某个属性,比如说支持-webkit-transform,但是不支持直接写transform,可 ...
- 测试浏览器是否支持某个CSS属性
花了几个小时写了个API,为了兼容多种用法和测试花了不少时间,求鞭打.嘲笑和建议. <!DOCTYPE HTML> <html lang="zh-CN"> ...
- 判断浏览器是否支持指定CSS属性和指定值
/** * @param attrName 属性名 * @param attrVal 属性值 * @returns {boolean} */ function isCssAttrSupported(a ...
- 原生JavaScript判断浏览器对CSS属性是否支持
/*判断浏览器是否支持某个css属性*/ function SupportCss(attrName){ var i=0, arr = SupportCss.opt.aBrowser, eleStyle ...
- Javascript检测浏览器对CSS属性的支持 /* supports */
//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...
- CSS中浏览器开发商特定的CSS属性
浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...
随机推荐
- css布局学习笔记之max-width
设置块级元素的 width 可以阻止它从左到右撑满容器.然后你就可以设置左右外边距为 auto 来使其水平居中.元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距. div{ width ...
- javascript:自定义事件初探
javascript:自定义事件初探 http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html
- [转]如何正确设置nginx中remote_addr和x_forwarded_for参数
做网站时经常会用到remote_addr和x_forwarded_for这两个头信息来获取客户端的IP,然而当有反向代理或者CDN的情况下,这两个值就不够准确了,需要调整一些配置. 什么是remote ...
- EF 拉姆达 动态拼接查询语句
EF 动态拼接查询语句 using System; using System.Collections.Generic; using System.IO; using System.Linq; usin ...
- ACM题目推荐(刘汝佳书上出现的一些题目)[非原创]
原地址:http://blog.csdn.net/hncqp/article/details/1758337 推荐一些题目,希望对参与ICPC竞赛的同学有所帮助. POJ上一些题目在http://16 ...
- 使用Calendar增加日期
/** * @Description: 当前日期加上n个月返回long date */ public static long getLongDateAddMonth(int n){ Calendar ...
- js加载优化-二
http://www.cnblogs.com/radom/archive/2011/04/26/2028886.html ontrolJS 主要为了是解决网页加载中Js文件的性能问题,ControlJ ...
- C 语言---漂亮的宏定义
写好C 语言,漂亮的宏定义很重要,使用宏定义可以防止出错,提高可移植性,可读性,方便性等等.下面列举一些成熟软件中常用得宏定义. 1.防止一个头文件被重复包含 #ifndef COMDEF_H #de ...
- WIN7_64位系统安装oracle以及PLSQL方法(不用装32位oracle客户端)
一.oracle10g安装,比较简单 1.去Oracle网站下载Vista版的Oracle:Oracle Database 10g Release 2 (10.2.0.4) for Microsoft ...
- FWA winner | Car Visualizer WebGL
FWA winner | Car Visualizer WebGL Car Visualizer made in WebGL using ThreeJS. It requires a modern b ...