尚硅谷前端基础 (115)

好，那么关于我们小米的这个官网首屏这个练习呢，我们就算是给他做完了啊，这个项目的话也比较典型，等于是对我们之前所有的知识点一个总结，那么接下来呢，我们开始进入到我们下一个大块啊，下一个大块我们来新建一个环节，来新建一个文件夹，我们叫做一个animation animation animation表示的意思叫做一个动画啊，动画的意思其实很简单，我们看动画片都看过，对吧，网上的一些动画我们都看过，那就是如何在我们的这个哎，GS这在网页中啊，跟GS没关系啊，纯CSS的，如何在网页中我们实现出一些这种动画的效果啊，动画效果来我们这来说一下零一，我们先说第一个，我们叫做一个过渡，过渡我们写一个网页先啊来运行起来过渡，其实之前啊，之前我们用过过度，哎，之前我们在那个做那个小米练习的时候，我们经常要做，我们有那个下拉框有一个过渡效有一个。

慢慢展开那个效果呀，哎，那个就是过度啊，那个就是过度，那这里边呢，我们先整一个东西啊，点一个BOX1 box1里边我们在div点一个BOX2，呃，我们来简单的设点样式啊，简单设点样式，这里边呢，我们直接点一个BOX1，哎，我们先呀，把这个默认样式给它清除掉style标签，Style标签默认样式的话，我们简单清一下啊星号我们来一个MARGIN0，然后来一个这个TING0，把这个默认的margin和ting给它清掉，清掉以后呢，在这儿我们来写一下这个BOX1，呃，点一个BOX1 box1的话，我给它写宽一点啊，Y是一个800像素，Hi呢，是一个是一个，这个也是800像素吧，稍微大一点，然后的话，我给它一个背景颜色，Background color background color呢，我给它来一个这个silver吧，Silver银色的啊，那这样我给他设这么一个背景，这当然我们一个画布了是吧，画布了，然后下边我们点一个box，一下边的我们div，所有div我们都给它设置这么一个东西啊，我们给它来一个这个。

来一个这个west啊，Wise的话，我就直接来一个100像素，然后呢，Hat也来个100像素啊，Background color background color，我们来一个井号一个bic啊，这里面呃，颜色我们可以再单独指定是吧，单独指定我们这里边再单独给BOX2指定一下啊，点一个BOX2的话，我们直接就别都统一设置了，这我们就给它一个back color井号一个B这一保存，那大概这么一个结果啊，然后呢，我希望再给它加个marin top marin top呢，我们来个100个像素啊，有个间距，但是又是出现外边距折叠，哎折叠了我们来overflo黑啊，开几个BFC解决这问题，好，那现在的话，这个是我们的一个，这是我们的一个，这个这叫一个BOX2，对吧，BOX2我们改成marin bottom包啊，这样一保存啊，因为待会儿我可能还想往下边创建点别的元素，那现在我希望做一个什么效果呢？当我鼠标。

它一到BOX1以后啊，当我鼠标移入到box以后，我要改变这个BOX2的大小啊，改变这个BOX2大小，那我怎么办呢？诶那很简单，我直接点一个BOX1，我要给BOX1是不是设置一个后啊，哎后以后我要改变的是谁？改变的是BOX2，所以这个时候我们要设计的一个这个叫做一个后代元素选择器，对吧？后代元素择器在这里边我们直接来一个Y200HET一个200，那这样保存一下，我们这移用是不是我移动到BOX1以后，我们这个BOX2的大小就发生发生变化了，哎发变化了，但是这个时候它有没有过度，哎，很显然这个时候是没有过度的，现在我们是BOX2，原本是100，原本是100，当我鼠标一入以后，我是不是想把它变成200啊，那这个时候我从100变200，它是干嘛的？它是一下子就从100变成200了，就没有这么一个过渡效果，那什么叫过度，那过度顾名思义，它不能直接变，它得干嘛呢？它得一点点变。比如说我从一。

变成200不是吗？哎，我先变成101，哎，再变成102，再变成103，再变成104，最后变成200，是不是就会有这么一个逐渐变化的一个效果呀？哎，之前我们小米那块我们写过这个东西，对吧？写过这东西，那这里边我们要设置，我要怎么设置，那我就需要在BOX2这我给它加上一个过渡，我们叫一个transaction transaction啊transaction我们写一个什么呢？He，哎，He hit he，我写一个什么呢？我写一个两秒，那这句话的意思就是当我们BOX42的高度发生改变化的时候，我要花费两秒时间对它进行切换，但是现在它只对高度有影响，那我如果想对宽度也有影响呢？我这简写的话，我可以写一个这个哦，那就表示什么意思呢？当我所有属性发生变化的时候，我用两秒时间进行什么呢？进行切换，那这个啊，保存一下，那这个效果就叫做一个什么呀，这个效果就叫一个过渡啊，就叫一个过渡，所以这个时候我们来写一下，在报告字上写什么是。

过渡，过渡呢，英文就是transaction transaction啊没有科ion，这是transaction是另一个词是吧？我们现在不管它了，Transaition啊，Transition叫做一个过渡，那什么是过渡，过渡就是什么呢？哎，过渡，哎通过过渡我们可以什么呢？我们可以指定当一个什么呢？诶一个属性，一个属性发生变化时叫什么呢？诶的切换方式啊的切换方式，什么叫切换方式？那比如说我现在宽度从100变成了200，那我怎么切换，我是一下子变成200，还是我一点点变成200，这就指的是一个切换方式，所以我这儿写的transaction写的是一个，哦，那就是什么呀？哎就表示我所有属性方式变化的时候，我不是一下子换过来，而是花费什么呀，两秒时间有一个过渡效果，那通过过渡呢，哎，通过我们这个过渡效果，过渡可以什么呢？诶可以。

创建一些什么呢？诶非趁的，诶非的这个效果，然后呢，提升我们的一个用户的一个体验啊过度主要这么一个目的，加上一些效果以后呢，诶可以提升一些我们的用户体验，因为我们都希望看到一些比较，诶比较舒服的画面，对吧，比较舒服的画面好，然后的话，我们在这儿来说一下，过度的话，我们这个是一个简写属性，实际上对于过度来说，我们有很多属性啊，都有几个属性吧，我们来说一下，第一个我们有一个transion，一个property，还有第二一个我们还有一个叫做transition的，一个叫做嗯，嗯，Direction，嗯。叫做这叫应该叫呃，Duration啊duration还有一个我们叫做一个transaction，的一个timing function啊TIM function最后一个呢，我们叫做一个这个transa transaition的一个叫做一个这个这个delay transition一个delay，我们一共有这么四个属性，这四个属性它影响着我们的过渡效果，我们一个一个来说，先说第一个trans property trans property，它指向的，它指指定什么呢？诶指定我们的这个什么呢？哎，要执行过度的一个属性。

过渡的一个属性，也就是说你要对哪些属性执行过渡效果啊，过渡效果，所以这个时候我们可以写一下，比如说我只行一个trans，塞一个property，我可以写一个外啊，我可以写一个外，那这个时候就表示当我的外发生变化的时候，我要执行这个过渡效果，但是现在没用，现在是没用的，你看现在是不是还是一下子直接变过来啊，为什么现在没用，因为我们没有指定它的一个时间，所以这个两个东西啊，你要指定过渡有两个东西是必须的，一个是我们property，还有一个这个duration是吧，这两个是一个必须的，所以这个duration是表示什么呢？表示指令我们这个过度效果的一个什么呢？的一个持续的一个时间啊，持续时间，也就说你要花费多长时间去执行这个过渡效果，所以我们这直接来一个transaction transaction我们直接啊transaction的一个这个我写什么呢？我写一个两秒，那这就表示什么意思呢？这就表示当我们这个外发生变化的时候，我花费两。

秒时间进行切换啊，进行切换，那这里面看效果，你来看，那这个时候wise你看是不是就会有一个过渡效果了，哎，但是我们这个has依然没有，因为我没写hasde是吧，只写了一个wise啊，所以我们先看第一个表示的是执行过渡的一个属性，当然你这儿你可以写，你说你想写hi，你把hi干嘛呢也写上就完事了啊，那这样我们来再看效果。一执行是不是就行了啊，就行了啊，所以啊，这个是我们指定我们要执行过渡的一个属性，那我们说了多个属性干嘛呢？多个属性间使用我们这个逗号隔开，哎，使用我这个逗号隔开啊，然后如果什么呢？如果所有属性都需要什么呢？都需要过渡。

哎，则什么呢？则可以使用我们这个O关键字，所以在这儿的话，如果你说哎，我不光white head，我marin，什么life right也需要写，直接写够，那写O就代表什么呀，一切啊，所有属性，所有属性，那当然我不一定是非得说老师，我就非得说所有属性都要切换，我就加我吗？不一定，比如说我的我要切换的属性特别多，我有十个属性，我有100个属性都要切换特别多，那这个时候你最好就写一个什么。写一个，因为你一个写实在是会有点麻烦啊，有点麻烦啊，那这个是我们说它的一个设置，然后你可能会有问题，诶那老师呢，哪些属性可以支持过度呢？诶我们注意了大部分属性，大部分属性都支持什么呢？都支持我们这个过渡效率，诶像什么呀，像。宽度啊，高度啊，这些有数值的，那其实基本上特点的话就是只要它的值是一个数值，它的值是可以计算的，我们就能过渡啊，只要它的值是可以计算的，我们就能过渡，哎，抛主你说不能计算了，我这东西算不出来了，算不出来那对不起，过渡不了，只要是能计算的，像像素啊，哎，像什么角度啊，哎，像什么这颜色呀，这些都属于可计算的，所以这些都可以过渡，所以比如说你想给BOX2换一个颜色，那你就background color background color，我们换一个orange orange，那这个时候其实你会发现它也干嘛，哎，它也可以过渡，颜色也会发生过渡，因为本质上都是数值啊，所以注意，只要是有效的值，只要是能计算的值，都可以过渡啊，都可以过渡啊，当然其实大部分都可以啊，很少一部分啊，用的时候你用那个，但是那些不支持的，一般我们有没有这个需求啊，好，这个是我们说一。

就这玩意儿，然后但是你注意啊，注意注意我们过渡时，过渡时我们必须是什么呢？我们必须是从一个有效值，哎有效数值向什么呢？向另外一个有效数值进行什么呢？进行过渡啊，一定是向一个有效数值向另外一个有效数进行过渡，所以这里边比如说啊，你看着我写一个margin left，呃，Margin left我要如果写一个零的话，我写一个零的话，我写一个零，哎咱们先我们先写一个凹吧，Margin left，如果写凹的话，它会有一个最大值，它是不是会把这个margin left设置的特别大呀，哎，特别大，那这个特别大，具体来说这应该是700像素，因为我们这一共才800像素，元素是100，所以这应该就是700像素，对吧，所以我可以给margin写一个比较比较大的值，那这个时候呢，我把宽度高度给它掉了。

我能不能对margin left实现过渡效果呢？注意是可以的，比如说我可以把margin left直接换成零啊，直接换成零，那这样的效果就是你看我这元素是不是就往回走了，哎，就可以往回走了，这是我们说一个有效的，所以什么叫有效数值向另外一个有效数值进行过渡，700就是有效数值，零也是有效数值，那这里边我们实际上就是从700向哪向菱形过度，都是有效数值，但是如果你这不是700，你这是凹凸，凹凸，你看效果这是一样的，对吧，效果是一样的，你希望现在通过凹凸向零过度，那么对不起，能不能过度，不能过度，因为凹凸不是一个有效数值，换句话说，我们的浏览器它不知道怎么凹凸从凹变成零，它不知道怎么一点点变，它只能什么一下子就变过来，所以你在整这个的时候，我们之前也体现过这个问题，对吧，你像left，我不指定left的值，如果不写，那么left的值就是一个凹凸，那如果它是凹凸的话，这个过渡效果是没有办法。

实现的啊，这是一个注意的点啊，注意点好，我们先给它去掉，然后呢，我们再把这个Y和head打开啊，回到我们原来一个状态，那现在还是一个宽高的一个过渡啊，宽高一个过渡，那接下来呢，我们来说我们这个duration duration呢，我们叫做一个持续的时间，那我们这个时间的话，两种单位啊，时间单位的话就是一个秒和什么呢？和我们这个毫秒啊毫秒，那这里边注意了，我们它的一个进制是一个一秒，等于一个什么呢？等于一个1000毫秒，所以我这写两秒跟我写2000毫秒效果是一样的啊，效果是一样的啊，当然你这可以写改小一点，改成100毫秒，100毫秒，那就等于是一个是一个0.0.1秒，对吧，是一个0.1秒这么一个啊，你还可以再想啊，秒和毫秒，这个都是我们可用单位，那一般这两个都行啊，但是你要知道他们一个进制，你写一秒就等于1000毫秒，那你如果这一一百毫秒你改成秒，那就是一个0.1秒啊，0.1秒这是一样的，对吧，这是这是。

一个效果对吧，这是我们的一秒，跟我们这个100毫秒是一样的100毫秒。

对吧，效果是一样的啊，效果是一样的，然后呢，我们这个directionration的话，它也可以分别指定时间，比如说你这写一个had，这写一个wise，你希望干嘛呢？它俩的时间是不一样的，外你可以干嘛呢？你可以hit一个100，然后呢，我们这个外就一个两秒，也是用逗号隔开，你看这hi的切换就非踌快，Y速就比较慢一点，比较慢一点啊，可以分别指定这个时间叫做一个对，比较简单，不多说了啊，这个要注调啊，注调我们都给它，呃，还是改回我们原来的状态，我们这是一个transaction的一个property，哎，Property我们就是来一个这个O啊哦，然后时间呢，我们还是一，我直给一个两啊，我们来一个。两秒，然后接下来我们来看第三一个，我们叫做一个timing function，这个是什么呢？这个是我们过渡的一个时序函数。

哎，过渡的一个这个时序函数，什么叫时序函数，因为就是你或者叫时间函数也行，这是什么意思啊，就是我们。去执行过渡效果，本质上实际上就是把我们这个元素从一个点往另一个点，是不是执行这个切换下，哎执行切换，比如说我们刚才这个宽度高度，那实际上我就是从100往哪啊，往这个200是不是直行过度啊，哎直行切换，也就说我是从一百一点一点的变成什么呢？变成200，哎它是这么一个效果，它这么一个过渡，那这个时候注意了，那我们这种过渡效果，除了一个时间以外，那时间我们已经指定了，就是两秒，就是我从100变成200，它的时间是一个两秒，那除了两秒以外，这两秒当中，我这个东西怎么切换是不是也是不一定的呀？诶比如说我这100我可以干嘛呀？哎，我可以一点点的是吧，我可以一点点的，诶，先变成110，然后变成120，然后变成130，然后变成140，然后变成200，这是等于是一个匀速的，哎，匀速变化或者我也可以什么呢？先变成110，然后变成130，然后变成160，然后变成什么呀，200，那这时候我是不是等于。

做了一个加速的变化，哎，加速运动，所以这个时候我们时序函数实际上指定的什么呢？诶指定的是我们这个动画的一个过渡的方式啊，指定我们这个过渡的一个执行的一个方式，它是如何执行的啊，如何执行的，所以这里边我们直接写一个这个timing function timing function，它的一个默认值是这个意思，意思的话你看效果啊，你写完了跟没写是一样的，对吧？当然这这一块我们现在看不明显，我们得对比一下啊，我们得对比一下，那这里边呢，我们再写一个BOX3 box3由于我们上面已经写样式，它会自动出来，但是我们这里边啊，我们单独给BOX3设置一个颜色，点一个这个BOX3，点一个BOX3 box3的话，我们给它来一个background color，给它来一个orange啊，Orange对比一下，Orange设置完了，这是BOX3吗？BOX3啊BOX3给它设置一个orange，然后这儿呢，我也不写它了，这我也不写它了，我直接改成什么呢？直接改我们。

存这个它下边是div，那这样是不是等于我所有元素都移动了，哎，都移动，然后上边我们统一设置一下，我们把它改成一个marin left改一个零，然后在这儿呢，我再设置一个margin left改成一个700，那这样的效果呀，就是我让这两个当我鼠标移动到这里边以后，这两个元素是不是会发生这个位置的一个变改变呀，哎，700单位不要忘了啊，700像素移动它俩是不是就移动了，哎，它就发生移动了，但是Bo括三现在你看它就是一下子过去，它是不是就没有这个过渡效果呀？哎，因为BOX3这我没有设置过度，我们来设置一下transion的一个property，我们这儿来一个这个哦吧，哎哦，然后这是一个transion的一个这个Du的话，我们来一个两秒，也就说他们俩的执行时间是是一样的啊，是一样的，所以这个时候你看这两个东西是。

是不是运行方式是一样的呀，哎，运行方式一样的啊，所以这是我们来对比了啊，现在我给BOX1设置一个，哎，BOX2设置一个这个is，这个时序函数，这时候看效果有没有区别，哎，它没有区别啊，它是没有区别的，是一模一样的，所以这个时候啊，我们来说一下它可选值，可选值的话，这个is叫做一个默认值啊，默认值你看它什么效果。你想我？哎，是不是开始的时候比较慢，然后一点点它是在加速啊，哎加速加速完了，你看它到中间那会儿就特别快了，特别快，然后停的时候是什么呀？是减速的，所以这个默认值的效果就是什么呀？哎，慢速开始，慢速开始，然后先加速，哎先加速，然后什么呢？然后再减速啊再减速，所以它是什么先加速，然后自动减速，所以它停的时候它不是很愣的停下来的，它停的时候它是一点儿一点儿停下来的，它不是呀，咔停那了，它是一点一点的啊，它是一个曲，哎有一个这个减速过程的啊，先加速啊，慢速开始先加速，然后他再去做这个减速啊注意这个is这个这个时序函数的一个特点，然后再往下说，我们除了is的话，我们还有一个叫做这个l ler什么意思呢。

LA表示的是一个线性的啊，线性的线性什么意思，看效果。注意啊，我只给BOX2设置了BOX1我们可没有设置，所以你要看他俩这个区别啊，你看他俩区别，首先你要注意他俩，实际上你仔细看的话，他们两个人到达终点的时间实际上是一样的，你看。到达终点，你得先给它回到这儿来是吧，到达终点的时间，你看实际上终点的时间是基本上是一样的，但是他们之间执行的时候，那个过程不一样，你看我这个BOX2啊，它永远都是一个速度，永远都是一个速度，然后到最后咔一下停了，而我们这个BOX3的话，它实际上它会有一个什么呢？诶，它是有一个加速减速一个过程的啊，加速减速过程的，所以这个laer就是一个匀速运。

匀速运动，匀速运动，但是这种东西的话，这种匀速运动实际上在我们现实生活中比较少见，现实生活中没有匀速运动，基本上都是你跑步也是你不可能匀速跑，一定是有一个加速减速的一个过程，所以这个laer呢，有时候用它不是特别的自然，所以用的时候你要这两个东西选的时候，你要考虑诶什么场景用啊，什么场景用，但是他们的时间都是一样的啊，都是两秒到达那个终点的，然后下边一个我们叫做一个这个is in is in is呢你就可以理解成是一个这个慢速的，匀速慢速的啊印呢，你可以理解成进入，进入其实你可以理解成开始。

开始，所以这个even in的话，你要看的话，其实就是慢速开始，慢速开始那就是什么呀？加速啊，它就是速度开始很慢，然后一点点很快嘛，所以它应该是一个加速运动啊，加速运动，所以这个时候我们来看一下效果，你看它就是越来越慢，开始比较慢，然后速度是不是越来越快啊，哎，越来越快，然后到最快的时候咔停了是吧，它是一个加速运动啊，它是一个加速运动，然后还有一个我们叫做一个is的一个out，哎is out，那就是out，就是出，你可以理解成是停止，那就是什么呢？就是停止的时候比较慢，所以这个就是一个减速运动，减速运动啊，减速运动来保存看效果。哎，我没改呢是吧，我说怎么跟印印一样的是吧，Ex的啊看效果。哎，你看是不是开始特别慢，然后就变得逐渐变得就特别快了，哎是这么一个效果，它是一个减速啊，它是减速一上来达到一个最快速度，然后速度一点点去减小啊一点减小，Out减速运动，还有一个玩意儿叫做easy in out easy in out，一开始out结束，那就表示开始慢，结束慢，那就是中间什么呀，哎，中间快，所以它属于一个什么呢？它属于一个先，哎加速。

慢速开始，哎，就其实先加速就是慢速开始对吧，先加速然后后减速这么一个效果，所以这个时候它跟这个E思差不多，但是它速度比那个就是会稍微速度不太一样，但是结构上差不多，都是先加速后减速，但是它没有E思那么那个匀，它会比较你看速度会有时候比较快是吧，这个加人的速度，所以这个是我们这么几种这个时序函数是吧？Is Le is in，还有这个is out is in out啊这几种待会儿自己测试一下，体会一下，我们用的时候也是根据不同的情况去选择，然后的话，其实你可能会感觉，诶这几种可能会有点少，对吧，有点少，但是其实呢，我们还有很多种方式去指定，那现在的话固定方式就这几种，但是实际上他们这种指令方式其实都是通过一种叫做叫做一个被塞尔曲线这么一个东西指定的，那什么是被塞尔曲线啊，其实很简单，就是一个什么呀，就一个X轴。

一个Y轴X轴表示什么呀？表示这个时间time。哎，这个外轴呢，表示你移动的一个距离吧，就是一个长度吧，比如说我们就是色，但是不一定是长度啊，因为你有颜色有什么东西对吧？Time，那这一块等于这个，这是不是就是我们的终点呀？哎，这是我们终点，我们要向这个终点去移动，那这里边如果是匀匀速匀动的话，那我们这个线就是一条什么呀，就是一条直线，它属于一个这个匀速移动对吧，匀速移动，那如果是加速运动的话，那可能我这线就比较直，直着就上来了，对吧，时间比较短，它直着上来了，所以这里边他们这些所有的方式，实际上都是通过这个贝塞尔曲线来指定的，那我们也可以通过一种方式叫什么呢？在这啊看叫做一个这个cube，一个贝，There，这叫什么呢？这个叫做贝塞尔曲线，哎，通过它来干嘛呢？哎，来指定我们这个，哎叫做什么呀？哎，时序时序函数。

但是问题来了，这贝塞尔曲线谁懂啊，反正你要让我去表示的话，我是表示不出来了，对吧，那怎么表示不用表示，那怎么办呢？我们看一下网上会有很多这种现成的这个什么呀，工具帮我们去生成这个东西，这一个网站啊，我给粘过来，我把这个网址呢，给你放到这儿，放到这儿啊，这是它的网址啊，这条网址你可以通过这个网址来看，那这里面注意了，他这看的就是一个这个贝，这条线就是一个贝塞尔曲线，它这给我们提供了一个现成的，比如说这个laner，这个就是一什么。

这个LA现在它就属于是一个，这个叫什么呀，叫做一个匀速运动，所以你看它这个线是不是就是一个直线呀，我能不能把它选过来。那这这个就是一个laer laer我看有没有值啊，哎，你看laer给你写值了，Laer值就是什么呀，就是0011啊001，所以你要想用贝塞尔曲线表示这个值的话，你在这就填什么呢？填零逗号零逗哎零逗号零逗号零逗号一，诶这是一逗号一这么一个，这就表示一个匀速的，那这时候你看效果啊，看效果这个跟我们这个匀速，你看是不是也是一个匀速的运动，哎，也是一个匀速的运动，那同理，你说我想指定这个意思，意思你看是是多少，是25点儿，这叫什么呀。点25.1.25，诶这是。点25.1.25，我们试试啊，点二五。

哎，这直接写了是吧，直接写了，我们直接复制过来。这应该就是一个那个E的那个贝塞尔曲线是吧，你看这两个运动效果是不是就一样了，哎，是一样，所以你可以通过这个贝塞尔曲线可以指那个值，那你说老师这玩意儿是啥值啊，这啥值啊，所谓的贝塞尔曲线，其实这条线就叫贝塞尔曲线是吧？那这条线你看啊，它的横轴是time是吧，横轴time纵轴它写的是一个呃，Progression叫做一个进度是吧，它用的是进度，那到头的话就表示我们这个结束了，是要运，运动到到到我们的目标位置，你可以理解成是一个长度啊，这个距离，那这条线就是那个贝采尔曲线，那这个线是怎么表示的，这个线实际上是通过两个点表示的啊，通过两个点表示的，那我们这儿是不是写了这玩意儿啊，那这表示什么意思，这就表示的是这两个点的坐标啊，你就是通过这两个点，你可以确定出这个曲线长的形式，所以这个第一个表示是我们第一个点的坐标，第二个表示我们第二个点的一个坐标，所以你说我们自己写怎么写写不了。所以我们这是有工。

对啊，哎，有工具你可以拖一下啊，你可以拖一下，比如说你可以你可以拖，你看这线是不是就会发生发生变化呀，诶发生变化，比如说我拖这么一条线，诶你看这条线什么效果，我们大概猜一下它什么意思，什么意思，首先我们这条线先是干嘛时间，这是时间，这是我们的距离是吧？你看它这一点，它是属于是一个加速啊哎，距离越来越多，然后时间越来越短，属于一个加速对吧，加速加速到这个位置，诶然后这儿是不是等于这弧度就变小了，变小了它这是不是有点减速的一个效果呀，哎减速然后减速，那注意了，你看啊这儿比较奇怪了，这干嘛了，这是我们的进度，然后它是不是还往回走了，还往回走了，那等于等于他开始是一个先加速，然后有点减速，然后有点往回走，往回走一个步骤，它干嘛了，就就咔往上冲了，是不是这么一个效果，哎，这么一个效果，那这个它会不会有这么一个效果，我们来看这个线是不是已经值已经给你写好了，写好了以后我们直接给它复制一下。

CTRLC，然后我们给他粘过来，我们看看啊，它会不会有一个回弹的效果，在这呢，我们一刷新看着啊。看到了吗？哎，他先开始挺快的，哎，先开始挺快，咔挺快，然后到一个点的时候，它会往回走，然后再再加速，哎，那这个就是我们贝塞尔曲线这么一个，诶一个一个使用方式啊使用方式，当然它其实还挺有意思的，对吧，挺有意思，你可以通过这个线来拖动出它这个时间与这个进度的关系，那这我就不再演示了啊，我再演示了，你知道怎么用就行了，直接把这值往这一粘就可以用了啊，就可以用了，好，这是一个它我们不多演示了啊，这个叫做一个timing function，除了这个被曲线以外的话，我们还有一个方式trans trans我们叫做一个timing function，我们还有一种方式，我们叫做一个steps steps叫什么呢？叫布steps steps叫什么呢？叫分步步骤啊，步骤分步执行，我们这个过渡效果，什么叫分步执行过渡效果，我们现在这个过渡效果，它是怎么效果。

它是很流畅的，是不是就走过来了，那所有所谓的分布是什么呢？诶我把整个这个过渡效果我分成几步，诶比如说我可以分成一步，我分成一步以后，我直接写一个STEP1，那这时候效果就是咔，你看一步怎么办？他是不是直接就跳到那儿了，哎，直接就跳到那个位置，所以这就是一步，那我如果分两步的话，他就干嘛呢，他会先跳到中间，然后再跳到什么呀，结束位置，那我可以再分什么呀，再分三步，再分三步。咔咔咔是不是跳了三次，哎，跳了三次，所以这个steps就等于它的一个过渡效果就没有那么流畅了，它属于什么呢？它属于是一个，诶分步骤开始不动，然后咔执行一步，然后再不动，然后又咔又执行一步，然后再不动，咔又行一步，所以这个时候我如果写二的话，那表示我分两步执行，那我是不是分两秒啊，哎两秒，那我就什么意思啊，第一秒跳一下，然后第二秒干嘛又跳一下，懂这意思吧，哎，可以分步执行，然后在这儿的话，我们第二个参数，我们可以指定一个值，我们可以指定一什么呢？比如说指一个end end的效果，你看跟我不写是不是一样的呀？哎，这end你写不写都一样，那默认值就是什么呢？默认值就是end啊，默认值就是end，那这什么意思，End的意思表示结束啊，表示结束什么意思，那我们想一下，我现在是分两步执行这个动画，那每一步实际上是不是一秒啊，每一步是一秒，第一步一秒，第二步干嘛呢？也一秒那。

既然是个一秒，它会有一个时间，那我要执行这一步的时候，我就要有一个时间，我是在这个一秒的开始的时候执行，还是在一秒的结束时的时候执行呢？我需要指令，那所以我指着一个摁的以后表示什么呢？表示我这一秒数完了他才执行，所以一上来以后，你看啊，它上来是不动的，它要等一秒再动，好咔，这时候动了，再等一秒再动第二步，所以这个表示end，表示是我在这个一秒的结尾才动啊，那我如果写一个start呢，Start表示什么呢？表示开始，那这个时候就是一上来，就是我一上来就动，看到了吗？哎，我一上来就会动，就是我在这个一秒的一个开始干嘛呀，就要动啊，就要动，这么说可能不太好理解，那我们把时间可以放长一点，比如说我是十秒，十秒我分两步执行，那每一步我是不是就要花费五秒啊，诶每一步发花费五秒，那我执行的时候，我是在五秒的开始执行呢？诶还是在五秒数完了以后执行呢？诶我们就可以通过start。

还有N来指指令SP表示什么呀？一开始它就执行啊，End表什么呢？哎，我这秒数完了我才执行啊，表示的是执行的一个位置啊，执行一个位置，你自己体会一下这个东西，我说的话我感觉可能不太好理解是吧，你自己体会一下它的一个特点啊，我们这里边说一下啊，我们这个它的默认值ste，它可以什么呢？可以可以设置一个这个第二个值。

第二个值我们叫什么呢？叫做一个end或者什么呢？Start end表示什么呢？哎，表示在我们这个时间结束啊，结束后开始什么呢？结束时开始执行，执行过渡，哎，那start表示什么呢？表示在我们这个时间开始时执行过渡啊，开始时执行过渡啊这个我们end end的是我们这个默认默认值啊默认值哎就是那个什么，我数数嘛，比如说我数20，诶一二三四五六七八九十，我数20是吧，我十步我数，我数每数十下你动一下对吧，那我可以，我可以什么呀？我可以数一的时候你就动，我也可以等我数到十的时候你再动，所以一的时候就表示开始start，十就表示结束，嗯啊嗯，好，他命方式完事了，下边一个我们叫做delay delay简单了，Delay表示的是我们这个动。

画的我们这个过度效果的一个延迟，过度效果的一个延迟，延迟什么玩意儿啊，一写你就明白了啊，Transaction transaction transaction transaction transaction啊，没有action上面写分号别写错了，Transaction啊transion t ion transition，我们写一个比delay写两秒吧，看效果一看就明白了。看着啊，看着走。看到了吗？这个块是不是没有立刻走啊，我把这住了啊，我不看它，我们来看效果，你看下边那块立刻就动了，但是上边那块它是不是等一会儿啊，哎，等一会儿，所以延迟的就是什么呀，就是等待哎相应什么呀，相应的时间以后。

等待我们的一段这个时间后，再什么呢？哎，再执行我们这个过渡啊，等待两秒，两秒以后执行就等于给你设置了一个这个延迟效果啊，你看回去的时候等两秒，回来的时候干嘛呀，也等两秒，等于我整个动画实际上执行了四秒，哎，前面先等了两秒啊，等了两秒是这么一个效果啊，这就不多说了啊，然后的话，这个是我们说的过渡效果的一个两个，还有刚才这三个一共是四个属性，对吧？这四个属性一般情况下们不这么写，一般情况下我们直接用谁写呀，直接用我们这个transition啊tsi t transition是我们的一个简写属性，它可以什么呢？它可以什么呢？它可以同时设置我们这个过度相关的什么呢？相关的所有属性，并且什么呢？并且没有没有什么没有太严格的。

次序要求，哎，他只有一个次序要求，哎只有一个要求，哎如果要写我们这个延迟，哎则什么呢？两个时间中啊，两个时间中第一个是我们这个什么呀，是我们这个持续时间，第二个是什么呢？哎，第二个实延迟什么意思啊，看着啊现在我们拿着举例子，比如说我现在想设置一个margin LA的一个过渡效果，那我们就直接写一个transition。Ti trans，我们直接写什么呢？我直接写一个margin left margin left来一个两秒，这样写的话跟上面写的效果是一样的，看到了吗？跟上边写的效果是一模一样的啊，当然你说老师我写把两秒写前面行不行？

把两秒写前边也行啊，没有顺序要求，没有顺序要求啊，两秒写前边效果也是一样的啊，效果也是一样的，但是唯独不一样，你要写延迟，比如说我这写两秒，我这写一个一秒，这写两秒那表示什么意思呢？前边时间是持续时间，后边时间是延迟时间，所以这个时候它就会延迟什么的，保存一下啊，这个时候它的执行它就会延迟一秒看到了吧，所以注意就是时间，因为他俩长一模样，没法区分，其他的东西没有顺序要求啊，没有顺序要求，包括你写这个曲线，这个这个时序函数，你直接写一个。被台式曲线一粘过来。是得到这么一个效果啊，得到这么一个效果啊，好，那这样我们这个过度的一些基础知识，我们就说完了啊，自己去理一下吧，不难啊，就是东西会稍微多一点，待会我们来讲一个练习啊，我们来听一下。