前言：
一直在思考一个问题，网上有很多关于Transition的介绍，很多还很详细，有必要再写一篇吗？我的答案是有，不然也看不到这篇文章了；
我是这样想的：第一，就好比学校的老师，全年级的数学老师，假设他们关于数学的知识结构是一样的，解答同一道题的时候，老师们会用不同的讲述方法给出答案，对学生而言，老师们的解答，有一个是自己非常容易理解和接受的方法；而这位老师对这位同学的解答就是最高效的；而给大多数同学容易理解和接受的方法的这位老师应该就是优秀的老师；那么我想通过这篇文章的介绍，哪怕只有一少部分的读者同学有收获，就是这篇文章的价值；
另一方面也是自己对知识的归纳总结，自己也会收益匪浅；不喜欢手机上看长篇大论的文章，所以这篇文章不会太长，尽量简明扼要，扯完看正文
正文：
为Transition属性做了一个思维导图，发现思维导图真的是非常的有用，直观，清晰，高效，方面记忆，真是一图胜千言；如下：
文字也有文字强大的力量，思维导图虽直观，但是不一定理解，还是要对图做一个补充介绍一下容易忽略的部分：
transition分为四个属性
-
transition-property 默认是all 即所有的属性都生效；还可以是none；
-
transition-duration 表示的是过度时间，一般单位是秒（s）或者毫秒（ms）；
-
transition-timing-function 表示在规定时间内的过度效果，贝塞尔曲线表示，ease 之类的也是贝塞尔曲线的一种；steps()表示；
-
transition-delay 表示的是时间延迟，一般单位是秒（s）或者毫秒（ms）；
举个例子：
先看图：
代码如下：
<p>css精选</p>
css:
p{
transition:width 2s;
width:100px;
background:#999
}
p:hover {
width:110px;
}
不知道有没有人像我一样纠结过一个问题，transition:width 2s;为什么写在p标签而不是hover里？
看下图：
这是把transition:width 2s;写在hover里边的效果，知道区别了吧；只写在hover里 hover 离开之后就没有过度动画了。因为p元素没有没有设置；只在hover下生效。
像上边默认两个属性的，其他两个一个默认是线性过度；只写一个时间的就是过度时间；
transition-property多属性表示法，比如想要改变宽度的同时，改变背景颜色；
(没有设置文字颜色的变化，试了几次都是，估计是gif录屏软件的bug)；效果就是通过设置transition-property :background,width背景颜色和宽度同时变化了；
代码如下：
p{
transition:2s;
transition-property :background,width;
width:100px;
background:#999
}
p:hover {
width:110px;
background: #37a86b;
}
还有一点就是设置 transition-duration:2s,3s; 背景颜色会以2秒的速度变化，宽度会以3秒的速度变化，和transition-property属性对应。
两个例子我觉得基础讲的差不多了，基础牢固之后，方能举一反三；实际应用中还有很多的玩法，以后可以在写写遇到过的实例应用。就酱。。。
有疑问欢迎留言
