transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下:

  1. color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性;
  2. 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等属性;
  3. 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等属性;
  4. integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性;
  5. number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性;
  6. transform list
  7. rectangle:通过x, y, width 和 height(转为数值)变换,如:crop
  8. visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility
  9. shadow: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow
  10. gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image
  11. paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似
  12. space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化
  13. a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

Transition 所支持的css属性的更多相关文章

  1. 十个实用但IE不支持的CSS属性

    对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...

  2. 判断浏览器是否支持某个css属性

    方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...

  3. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  4. 检测浏览器是否支持某个css属性

    以浏览器是否支持translate3d 为例说明,当然现代浏览器已经支持该属性.如果浏览器实现了带有前缀的某个属性,比如说支持-webkit-transform,但是不支持直接写transform,可 ...

  5. 测试浏览器是否支持某个CSS属性

    花了几个小时写了个API,为了兼容多种用法和测试花了不少时间,求鞭打.嘲笑和建议. <!DOCTYPE HTML> <html lang="zh-CN"> ...

  6. 判断浏览器是否支持指定CSS属性和指定值

    /** * @param attrName 属性名 * @param attrVal 属性值 * @returns {boolean} */ function isCssAttrSupported(a ...

  7. 原生JavaScript判断浏览器对CSS属性是否支持

    /*判断浏览器是否支持某个css属性*/ function SupportCss(attrName){ var i=0, arr = SupportCss.opt.aBrowser, eleStyle ...

  8. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  9. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

随机推荐

  1. css样式书写顺序

    这里推荐先写显示属性,再写自身属性,再写文字属性:并不代表非得按这个顺序写,但这种写法可以使css结构更清晰易读,修改起来比较方便. 而且在团队项目中能更好地提高效率. //显示属性 display ...

  2. django获取某一个字段的列表,values/values_list/flat

    class Building(models.Model): corporation = models.ForeignKey('company.Corporation', verbose_name=u' ...

  3. javascript全局对象

    一.Array 二.Boolean 三.Date 四.Error 五.EvalError 六.Function 七.JSON 八.Math 九.Number 十.Object 十一.RangeErro ...

  4. C# 新特性_协变与逆变 (.net 4.0)

    C#4.0中有一个新特性:协变与逆变.可能很多人在开发过程中不常用到,但是深入的了解他们,肯定是有好处的. 协变和逆变体现在泛型的接口和委托上面,也就是对泛型参数的声明,可以声明为协变,或者逆变.什么 ...

  5. 关于Redis的一些常识

    http://blog.csdn.net/mengxianhua/article/details/8961713 关于Redis的一些常识 2013-05-22 18:00 13315人阅读 评论(0 ...

  6. Axure快捷键大全

    基本快捷键: 打开:Ctrl + O 新建:Ctrl + N 保存:Ctrl + S 退出:Alt + F4 打印:Ctrl + P 查找:Ctrl + F 替换:Ctrl + H 复制:Ctrl + ...

  7. COM组件开发实践(七)---多线程ActiveX控件和自动调整ActiveX控件大小(上)

    声明:本文代码基于CodeProject的文章<A Complete ActiveX Web Control Tutorial>修改而来,因此同样遵循Code Project Open L ...

  8. cf479C Exams

    C. Exams time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  9. Jump Game 解答

    Question Given an array of non-negative integers, you are initially positioned at the first index of ...

  10. 【Python脚本】Python创建删除文件-----------我的第一个Python脚本

    Python相对C++和Java来说,是解释性语言,非常适合来编写脚本. 很久之前就开始学习Python的语法了,今天写了第一个Python的脚本,来简化我的一些日常工作. 我平时学习的时候喜欢新建一 ...