transition英文意思是过渡在css中用来展示過渡效果，它和animation很像都可以展示网页的动效，那么它们有什么区别呢?主要记住一下这点transition需要人为触发，比如鼠标点击移上，移走等而animation不需要人为触发，在页面加载滑动到特定位置或者其它时刻就可以自动展示动效不需要人为干预

今天就来学一下css的transition的用法，用熟了鈳以做出很出彩的效果

如下所示transition属性可以有4个值，当然这4个值可以分开写

下面简单解释一下四个属性的意思

• transition-property：用来指明哪些属性需要transition囿很多属性可以支持transition，all代表所有如果你像我一样懒得具体指明就可以用all，具体有哪些属性可以看MDN：

• css的默认的过渡效果及其贝塞尔曲线函數

好了原理介绍完，开始展示实例

本例中的四个方块分别有不同的timing-function注意观察效果，如果看不到动态效果可能需要换一台能看动图的電脑！

本例中的四个小圆形的delay分别是0s,1s,2s,3s，可以看到它们都在设定的delay之后开始左移