我们在写一些CSS样式变化的时候，经常会设置一个属性，就是transition。这个属性的名称就是过渡的意思，可以让两个不同样式变化值产生一个变化的过渡效果。
在motion组件上也有这样一个transition属性，我们可以通过它来实现对过渡效果的相关设置，比如最常见的动画时长duration，延迟delay，动画曲线ease等等。
注意，这个transition属性只对animate属性设置产生动画效果起作用。
其实你可能也发现了，在我们前面的内容中，我们好像都没有给motion组件设置这个transition属性，但是我们的元素通过animate属性进行变化依然是有过渡效果的。
这是因为motion组件它内部有一个默认设定，如果我们没有给元素设置另外的transition的值，那么相关样式变化的过渡效果就按照这个默认设定的来，不同的样式变化还会有不同的默认效果，比如位移变化，默认是一个快速的类似弹簧的过渡效果，而像透明度就是比较常见的补间动画的过渡效果（也可以理解为类似于匀速运动）。
那么如果我们自己设置了另外的transition属性的对象值，那么元素的样式变化，就会按照这个transition的对象值来进行。
这里先说一下在motion设置时间相关的数据，直接用数字类型的值就可以👉 1 就是表示是1秒，0.5就是0.5秒。
transition属性的设置，基本来说是很简单的，就是一个对象，然后定义好各种动画相关的设定（我们后面会讲更多的动画效果设定）。这个对象中的设定，会应用到该元素发生变化的所有样式属性上，可以理解为是统一设定。
但是假如我们想要不同的样式属性变化有不同的过渡效果怎么办，那么只要我们在设置transition对象的时候，在里面设置相应属性的自己独立的变化数据就可以了，就像下面这样：
可以单独设置任意多个样式属性的过渡变化数据，其他没有单独设置过渡信息的样式属性，都会按照统一设置的进行变化。
上面代码中还有个default属性，这个属性其实一般都用不到，这个属性里设置的也是过渡变化的数据，它可以理解为是最高级的统一设定，如果default里面设定了和外面一样的变化属性，那么以default为准，不过一般来说，这个属性一般不会去用，我们所有的统一设定就直接在外层对象中设定就可以了。
#
常用设定
delay
延迟
数字类型
｜
delay:3
延迟3秒
duration
过渡时长
数字类型
｜
duration:2
过渡时长2秒
ease
动画曲线/缓动函数
可设置三种类型数据
1 - 字符串，预设好的缓动曲线名称，比如 'linear'
2 - 数组，通过一个包含四个0-1数字的数组来设定自定义的cubic bezier曲线
3 - 函数，自己定义的缓动函数（很少会用，除非你自己会写缓动函数）
"linear"
"easeIn", "easeOut", "easeInOut"
"circIn", "circOut", "circInOut"
"backIn", "backOut", "backInOut"
"anticipate"
Framer内置的动画曲线名称
这个demo要打开之后尽量让显示区域全屏浏览👇
所有内置曲线的效果对比DEMO
repeat
重复次数
数字类型
｜
repeat:2
重复2次
特殊值
Infinity
无限重复
repeatType
重复类型
字符串
｜
repeatType:"reverse"
反向重复
可选值
loop
从头开始重复，默认的重复模式
reverse
反向重复
mirror
也是反向重复，目前看来和reverse效果一样（暂时不知道有啥区别）
repeatDelay
重复延时
数字类型
｜
repeatDelay:2
每次重复延迟2秒
Framer-motion里面的元素有三种元素变化（动画）模式，分别是Tween（补间动画）Spring（弹性），Inertia（惯性），这些变化模式都要通过元素的transition属性来设置。
三种变化都各自有很多的属性可以进行设置，来实现各种不同的变化需求，下面这些是我们在使用transition设置时经常会用到的一些变化设置：
以上这几个属性，像delay以及三个repeat相关的都是通用的，也就是我们说的三种模式里面都可以进行设置，但是duration和ease这个属性，ease是在Tween变化模式中才有的设置属性，duration是Tween和Spring都有的一种属性。
这可能会让有些同学感到有点不解，那为什么我要把duration、ease和它们几个放到一起讲呢？这是因为我们在真实写代码的过程，最常用的两个变化属性的设定，首当其冲是duration，然后可能就是ease，因为Tween是最常用的变化模式。
通常来说，我们要让某个元素指定使用一个动效模式来进行变化，那么可以使用type属性，比如：
但是，因为duration和ease我们非常常用，我们很多时候就会给元素设定一个具体的样式属性变化，然后再搭配上变化的时间duration或者动画曲线ease这个属性（这种情况一般我们就是想使用Tween变化模式）。然后，我们会发现，假如我们给一个元素设置了duration或者ease属性中的任意一个，你都不用设置type:'tween'，它就自动的变成Tween的动画类型，哪怕它默认这个样式变化的模式是其他动画模式，比如说位移的变化：
但是，duration这个属性设置在Spring变化模式中也有，为什么只设置一个duration就会把动画模式变成Tween？关于这个，我的理解是可能因为Tween的使用概率大大高于Spring模式，一般来说当我们去设置duration我们90%的情况都是想使用Tween模式，所以可能这个库的开发者就按照这个逻辑来处理这个情况，所以这个情况我们就当作一种书写特点来记住就好了。
这里，你有可能还会感到有点不解，那我们到底要不要明确写上动画的模式即type这个属性和值呢，这个等我们学完下一篇内容之后，你就能明白了。
接下来我们就来了解过渡效果可以设置的有哪些属性：
另外，还可以把动画过渡的这个对象，放到动画信息对象中，像这样：
这样设定的优先级是最高的，如果同时给元素的transition属性设置了过渡信息对象，然后在元素的执行动画的动画信息对象中也设置了transition属性，会以元素动画信息对象中的过渡设置为准。
🌟🌟🌟特别的，元素动画信息对象中还可以设置一个属性叫做transitionEnd，通过它设置的样式的属性，当元素动画结束之后会立即生效，比如下面这个代码：