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): 只支持下面的情况:从gradientgradient以及colorcolor,然后工作与上面类似
  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. 关于取数组地址的识记(&s+1,s+1,&s[0]+1)

    #include <stdio.h> #include <malloc.h> int main() { ', 'o'}; ); printf(]); ]+); printf(] ...

  2. 安卓初步:通讯技术介绍&&安卓介绍

    通讯技术: 1G    模拟制式    只能进行语音通话. 2G    GSM, CDMA    收发短信和邮件. 2.5G    GPRS, EDGE    访问wap网络数据.(图片, 壁纸, 文 ...

  3. css3实现手机qq空间菜单按钮

    工作之余写的一个类似于QQzone的菜单效果 先上截图: 图一为点击按钮前界面: 图二为点击按钮后的界面 下面上代码: <!--css部分--> <style type=" ...

  4. H.数7(模拟)

    1212: H.数7 时间限制: 1 Sec  内存限制: 64 MB 提交: 8  解决: 5 标签提交统计讨论版 题目描述 数7是一个简单的饭桌游戏,有很多人围成一桌,先从任意一人开始数数,1.2 ...

  5. [XMPP]iOS聊天软件学习笔记[一]

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  6. 工作中小知识点汇总(c#)

    1.OOP 实体与数据库字段转换(注意 此时实体字段必须和数据库中查询的字段列名相同) list = ModelExtend.GetByDataTablePart<EZRate>(ds.T ...

  7. SqlServer sys.partition_view

    --查看partition的四个视图 select * from sys.partition_functions--查看分区函数 select * from sys.partition_paramet ...

  8. C#操作XML文档(XmlDocument、XmlNode、XmlAttribute、SelectSingleNode、SelectNodes、XmlNodeList)

    XML文档是一种通用的文档,这种文档既可以用.config作为后缀也可以用.xml作为后缀.XML文档主要由元素节点和节点的属性共同构成的.它有且仅有一个根节点,其他的节点全部都是根节点的子节点或者子 ...

  9. Unix/Linux环境C编程入门教程(31) 数学函数带你战胜企业面试

    1.函数介绍: abs()acos()asin()atan()atan2()ceil()cos()cosh()exp()frexp()ldexp()log()log10()pow()sin()sinh ...

  10. Candy 解答

    Question There are N children standing in a line. Each child is assigned a rating value. You are giv ...