CSS3 过渡transition 认识

其实，我一直觉得自己对新知识是以一种抵触的情绪在学习的。因为我总是习惯于将事情想得很复杂，所以也错过了很多美好的东西。

以前觉得CSS3的知识应该是很难的，很难理解的。但是我发现我觉得知识点很难，是因为我的学习方式有不对，我习惯于听老师讲课，而不是自己去看那密密麻麻的文字(其实我一直觉得自己有阅读困难症)。

今天写的是CSS3中的transition属性:

 一、transition属性有四个独立属性，分别是：transition-property、transition-duration、transition-timing-function和transition-delay。

1.transition-property：检索或设置对象中的参与过渡的属性，取值有none、all和指定进行过渡的css属性(如：height、background-color或者color等等)。

2.transition-duration: 检索或设置对象过渡的持续时间（过渡动画持续的时间），值为时间(如：0.1s、2等等)。

3.transition-timing-function: 检索或设置对象中过渡的动画类型，值有linear、ease、ease-in、ease-out、ease-in-out。

    3-1. linear：匀速；ease：缓慢开始，缓慢结束，中间的时候会快一点；ease-in：缓慢开始，然后再慢慢变快，结束的时候看起来像是匀速的；ease-out：刚开始的时候比较快，缓慢结束；ease-in-out：缓慢开始，缓慢结束，和ease有点小区别。

    //我承认我的眼睛看不出来这其中每个类型之间的差别，只有linear和ease-in对我而言是动画效果很明显的。

    在线查看过渡的动画类型的效果

4.transition-delay：检测或设置对象延迟过渡的时间（就是说在多久之后才执行过渡动画），值为时间(如：0.1s、1s等等)。

如果只设置一个时间，则该值为过渡的持续时间。

 

二、transition属性的书写：

1.缩写方式：直接在CSS样式中的大括号里面写，如：

    #div {
        ...
        transition: height 2s linear 0.5s;
    }

2.拆分方式：也是写在CSS样式中，如：

    #div {
	...
	transition-property: height;
	transition-duration: 2s;
	transition-timing-function: linear;
	transition-delay: 0.5s;
    }

  当然，也可以为同一个元素的多个属性定义过渡效果。

 

三、transition属性的兼容性：

 

以上内容可能存在内容不足、内容错误的问题，希望各位读者朋友批评指正。