明明在讲着 jQuery，却忽然又跳回了 CSS ，小老鼠的课程就是这么随性。从知识体系上说，这样确实不够合理。但是把相似的和有联系的内容放在一起去讲，就更容易理解一些。
前面我们学习了过渡效果和动画，那些是使用 jQuery 去实现的，方法很简单，想要什么都是一句话的事情。
但问题还可以更简单一些，因为 CSS 本身就可以实现过渡和动画的效果。强调，这是 CSS3，听说加上这个关键词你们的学习动力就会翻倍。再强调，目前过渡和动画都属于测试属性，简单说，就是最新的浏览器都支持，但是老一点的很可能就不支持。
所以，究竟用哪种方法去实现动画效果，你就要根据实际的情况进行取舍，而不能很武断的强行评价出一个谁优谁劣。
CSS 的过渡效果也非常好写，简单到可能几句话就把它讲完了。之所以放到这里再讲，是因为一方面我们可以把相似的内容放在一起都说了，另一方面，产生过渡就需要发生一个变化，而发生变化是需要事件去触发的。这些在不了解 JS 的时候也可以讲，但是理解的深度就要差上好多。
过渡效果，是当某个元素的属性发生变化的时候，在开始状态和结束状态之间，补齐一些中间值，使这个变化逐渐发生，而不是生硬的转变。这样逐渐发生变化，需要消耗一定的时长。
这个道理很简单，大家先记住，后面好多地方还要用到这个原理。
如果我们想让事情变简单，就可以使用类似动画中关键帧的方法，我给出一个开始状态，一个结束状态，中间的过程让程序按照一定的规则去自动生成。就好像说，你从 A 地走到 B 地，有了起点和终点，至于中间的过程，自己一步一步的走就对了。
回头我们前面所讲的各种效果，基本上也都是这么做的。现在要讲的 CSS 的过渡效果，也是一样的。
我们给这个元素设定的样式，就相当于已经给出了起始点。就是从当前样式开始进行变化。
目标样式又如何给出呢？我们可以对这个元素，进行样式的修改，或者给它增加删除类，总之，使得最终应用到这个元素上的样式发生改变。那么有了我们所讲的 jQuery 的基础，这里就不需要再展开了，你应该已经能够想到好几个办法了。
但是，我们前面也做过这些事情，为什么没有看到任何的过渡效果呢？
因为我们并没有指出这些属性的变化是需要进行过渡的，以及需要用多长时间进行这个过渡。
所以我们需要一个新的 CSS 属性去把这个事情说清楚，仅此而已。
#miao {transition: width 2s;}transition 属性用来说明，有哪些属性需要进行过渡？花费多长时间去过渡。这里是如果元素的宽度发生变化，那么用 2 秒的时间去进行这个过渡。
如果有多个属性需要过渡呢？
#miao {transition: width 2s, height 2s;}用逗号进行分隔，然后一项一项去写就行了。如果所有的属性都需要进行过渡，这么写好像有点累，于是我们可以使用关键字 all。
#miao {transition: all 2s;}就是能发生过渡的属性全都产生过渡效果。还有一个关键字 none，自然就是全都没有过渡效果了，那也就不需要给出时间了。
然后我们也可以给出两个时间，那么第一个时间就是延时，表示等待这么长时间之后再去发生过渡效果。而第二个时间依旧是过渡所需要的时长。我们已经发现了，我们可以对多个属性去分别设置它们的过渡时间，再利用上延时的功能，就可以让这些属性的变化依次进行：
#miao {transition: width 2s 3s, height 2s;}最后时间可以使用小数进行表示。然后关于 CSS 的过渡效果，我们就讲完了。
暂无评论内容