尚硅谷前端基础 (117)

好，我们继续刚刚说了过度，呃，过度的话已经可以使我们这个东西动起来了，对吧？哎，我们还是在那，但是过度它也会有一个问题，它还是属于一种交互效果，就是我们在鼠标移入以后，它会动，但是它不会自己动，所以我们更希望有一个。更加强大的东西就是它真的像动画一样，像动画片一样，对吧，它自己可以去播放，那这个时候我们就要说一下，我们这个动画叫做一个HTM动画，点一个HTM来先写一个页面里边我们来运行一下。这里呢，哎，我们把刚才那个过渡那个我复制一份啊，复制过来保存一下，呃，然后呢，我们把这个页面的话，我把这个东西啊清理一下啊清一下。把这些之前我们过渡这些东西我都给它清掉。清掉啊，嗯，保存一下，那现在的话它还啊现在的话我们这个东西它还可以动，对吧，我把这个BOX3呢先去掉，我们就留一个BOX2，现在的话我们鼠标移动上去以后，BOX2的话，它是诶没有那个没有那个效果了，现在是不是等于只有一个这个诶瞬移的效果呢？呃，因为我们这个BOX2现在我们没有没有给它加这个transa，所以你要让它动的话，你可以呃trans transition啊transition我们直接来一个呃，哦或者哦都不用写了，我们直接来一个两秒，那这个时候它的效果就可以自己去移动了，对吧，自己移动了，但是我们这种过渡效果，它一定是在我们这个属性样式发生变化的时候才会执行，并且它的这个执行一定是就是它属性发生变化，一定是你有什么行为对吧，一定是发生某个行为以后，它才会去执行，但是我们就希望什么呢？诶比如说我这个做的就是一个动画效果，那可能我就是希望。

这个动画效果诶一上来诶就可以去执行，不用我去做任何事，我一打开这网页，咔咔咔就给我播放一个动画，对吧？所以这个时候我们就不能用这个什么了，哎，就不能用这个transition了啊，就不能用transition了，那不能用transition，那我们要用什么？那这里边我们要用一个东西叫做一个animation啊animation叫做一个这个动画，那这里边呢，我们先，哎不说这个动，先不说这个animation，我们先说一下我们这里边我们来说一下这个动画，就是这个动画的效果，就是动画不同，跟这个过度啊类似。

动画啊和过度类似，哎都是什么呢？都是可以实现一些这种动态的一个效果，动态的效那不同的是什么呢？呃不同的是我们这个过度需要什么呢？哎过度哎需要哎在这个某个属性发生哎变化时啊颁化时才会什么呢？才会触发啊才会触发，而我们这个动画可以什么呢？诶动画可以自动什么呀？诶自动触发这个动态效果，所以这个时候我们动画就是呃相对来说更也不能说更高级一些吧，它更灵活一些啊，它不需要你像我这个动，我还得鼠标一进去它再动，那我们动画的话，一打开直接就会动啊直就会动，那这里边我们要设置动画的话，它的原理和我们这个动画片的原理差不多，我们这里边我们要设置我们这个动画效果。

设置动画效果，我们必须要干嘛呢？诶必须先要设置一个叫做什么呢？叫做一个关键帧的东西啊，叫一个关键帧，我们必须要先要设置一个关键帧，这个关键帧是干嘛的？关键帧什么叫帧？帧的话，我们如果说你看电影或者看动画片，我们都会说这个电影啊，一秒钟多少多少帧是吧？一秒钟多少多少帧，什么叫帧呢？一幅图片就叫一个帧，比如说我这个电影一秒钟切换了十幅图片，那这个电影就是十帧的，对吧？我一个电影一秒钟切换了100张图片，那就是一个100帧的是吧？或者你说我们看那个那个那个玩游戏看那个，那说那个FPS是不是也是一个帧数啊？哎，说都是，都是这么一个意思是吧，说这么个意思，所以这个时候我们这里边要设置动画，我们必须要设置一个关键帧，什么叫关键帧，关键帧就规定了，哎，我们这个动画执行的一个点，我是从哪儿到哪儿经过哪这么一个点啊，所以这里边。

诶关键帧实际上它就是规定什么呢？诶，它设置了我们这个动画执行的，诶每一个步骤，诶每一个步骤，那这里边我们关键帧怎么设置，我们叫做一个at，我们用的是一个叫做一个key frames啊叫一个key frames啊key key就是钥匙是吧，Key frames啊key就是关键frames，就是针对吧key frame关键针，然后后边这里边注意key frames后边at啊是at key frames后边跟的是一个它的名字，这个关键帧的名字，那比如说我这起一个test这个东西随便起，你想起什么就起什么啊就一个名啊，跟那个class，跟那ID似的啊，起一个名，那这样我们就有了一个关键帧了，那关键帧里边我们有两个部分啊，我们最低要求我们可以写两个部分，一个我们叫to，后边一个大块，一个叫什么呢？一个叫做from to表什么意思？To表示从哪开始，表示我们这个动物画的开始位置。

表示我们这个动画的一个开始位置，而我们这个from表示什么呢？From表示我们动画的一个结束位置，哎，也就是说你要执行动画，那你肯定是要有开始有结束的，对吧？比如说现在我还是想让这个块从哪呢？从这个零移动到700啊，从零移到700，现在呢，我把这后我现在就去掉啊，后位没了，现在它就不会动了，对吧？我还是希望它从零移动到700，那么这个时候我的two，也就是开始位置是什么呢？就是margin left0啊，从零开始，那我的结束位置什么呢？结束位置我们就是一个margin left的一个什么呢？哎，700从零开始到700结束，那这样to就表示的是一个开始位置，From就表示的是一个结束位置啊，那这里边我们除了用to表示，我也可以什么呢？我们也可以使用0%。

也可以使用我们这个0%表示，所以你这写to或者写0%都是一样的啊，都是一样的，那我们同理，那我们这个from干嘛呢？哎，From也可以使用100%，也可以使用100%，那你写from跟写100%是一样的，那0%你就是一动画，一动画从开始到结束，那开始位置不就是零吗？哎，结束位就是100%，那我估计你猜也猜到了，我中间是不是还可以写50%啊，哎，我是不是还可以写33.5%啊，哎，你想写多少就写多少，也就是说你可以指定我们动画执行一些这个关键的一个位置啊，就这么简单，那现在我这个关键帧就指定好了，那我怎么能让它在我们这里边生效呢？哎，那假如说现在我需要对BOX2生效，那怎么办呢？诶，在这儿我们来设置我们这个BOX2的一个动画，那注意啊，我们在设置动画的时候，一定要先指定好这个关键帧啊关键帧，那这里边我们要说的一个，哎，我们的所有。

动画相关的属性都是以这个animation开头的，Animation就是动画啊animation第一个我们叫做一个animation的一个name animation name，那这个什么意思，动画的名字，那这是什么呢？诶要对我们当前这个元素生效的一个关键帧的一个什么呢？关键帧的一个名字，我们刚才是不是设置了一个关键帧叫test呀，所以这个时候我们这个name很点很很简单，那就是你要叫什么呀，叫做一个test，诶那这样现在我们这个关键帧，我们这个动画现在就应用到了我们这个BOX2上了，但是现在你注意它没有动，没有动，为什么啊，没有动没有动为什么？因为我们还没有给他指定动画值的时间，你看我只是从零到700，我是不是没有指定时间呀，所以我们这个东西跟那个transation差不多，我们也要有一个animation的一个duration，这叫什么呢？这个是我们这个动画的一个持续时间动。

画的一个执行时间是多久，那这里边比如说我们给它加一个duration，我们来什么呢？来一个两秒，跟那玩意儿一模一样，就是把那个transition换成了animation啊，ANIMATION2秒，然后一保存，看什么效果一保存。哎，它现在是不是就动起来了，哎，它就动起来了，但是哦，但是这里边其实我们会发现这个距离是反的是吧，我才发现我这写错了啊，这边我们要纠正一下啊，我们这应该正好写反了，叫什么呢？From是表示开始，To是表示结束啊看咋想的是吧。

刚才一时冲动啊，把这写错了啊，一纠正一下啊，From表示开始，To表示结束，因为from就是从哪嘛，To是到哪，所以from表示我们从margin left0到这个margin left700啊刚才写完了，那这个时候再看效果，我们来看它是不是就自己动起来了，哎，就自己动起来，那这样就从左往右就动起来，所以你会发现它跟那个transition基本上效果是一样的，唯一不同的就是它不需要我们去操作，它是不是自己就动了，哎，网页一刷新自己就动了，时间你觉得你觉得快了，你觉得快你就调短一点。保存一下它是不是就就动起来了，哎，动完了以后它就会回到原来那个位置，懂这意思吧？哎，所以其实这往下一讲，除了关键帧这不一样，我们transation设置的是某个属性，而我们的这个animation设置的是这个关键帧的名字，所以你写它的时候一定要先定义好这个关键帧啊，好，然后再往下看，那其实你猜也猜到了，那是不是还得有这个animation的一个delay啊，哎，Delay我们看效果这一保存。

哎，他是不是没有立刻动啊，哎，没有立刻动，所以这个呢，是设置我们的什么呀，我们这个动画的一个延时，我不多说了啊，这是我们动画的一个延时延石，然后还有什么呀，那肯定得还有什么呀，Animation我们叫做一个timing function啊，没function，比如说我弄一个lander，那这个时候它就变成了一个匀速运动啊，匀速运动，那比如说我换一个啊，换一个这个is的一个这个in out啊in out，那这个时候就会干嘛，哎，会变成一个先先加速，然后后减速这么一个运动，哎懂这意思吧，那这个东西其实是不是跟我们那个里面是一模一样的，哎，一模一样的啊，跟我们那个transa是一模一样的，但是和我们trans不同的是，我们这个animation的话，还多出了一些属性，我们来看一下文档，我们直接搜一下，直接你这一搜animation animation animation，那这样的话，所有动画相关的都会给你列出来，比如说我们刚才用到的animation一个。

的一个name anim animation的一个，还有一个叫做刚才我们看到的一个animation的一个timing function，是不是这些是我们刚刚写的呀？哎，那除了这些我们还有一个，哎，叫做animation的一个，一个叫做interation的一个count，这还有一个animation的一个playstate，还有一个animation的一个direction，还有一个叫做animation的一个fair mode啊fill mode是不是又多出来四个玩意儿，哎，多来四个玩意儿，我们一个个来说，先说这个的一个count。CTRLC我们复制过来animation的一个的一个count，什么意思呢？在我们这个，在我们的这个编程里边，它它本身的意思也是那个，它本身的意思是一个迭代的意思，迭代的意思在这儿的我们不多解释，你就理解成是重复的意思，那这儿就什么意思呢？就是我们动画执行一个次数，动画执行的一个次数，那你现在来看我们这个动画啊，我把延时给它，我先给它去掉，动画现在是不是只会执行一次啊，执行完一次以后，它就回到原来这个位置，对吧？回到原来这个位置了，那这里边我们就可以通过这个值来改一下animation的一个这个1ATION一个count，比如说我写个一，那就表示动画只执行一次啊，动画只执行一次，那这样就执行完一次就干嘛了，哎就完事了啊就完事了，我还可以写什么呢？我写个二，我写个二，那就他就会干嘛呀，哎，会执行两次，执行完一次，然后咔又回来又再执行一次。

对吧，那你写20，那是不是就执行20次，哎，20次我们数数啊，我数数哎一次。

哎，两次。三次啊，不数了啊，不数了，所以这里边它是指定一个动画，指定的次数，直接写一个次数就行了，然后除了这个的话，我们还有一个值叫做infinity infinity就是什么呀，无限执行啊，无限执行，所以这个时候我们来说一下，这个是次数，我们可以什么呢？哎，我们可选值，可选值我们直接给他指定一个次数啊，别让他转了，指定一个次数啊，你直接写个数字就行了，或者写一个什么呢？Infinite infiniteity表示什么呢？表示无限执行啊，无限执行永远永远动啊，一直动是这么一个意思，好，这个是我们说的它啊，然后其实我们会发现，当这个玩意儿执行的时候，它会它的默认它就是从from到to是吧，刚才我还我还说反了，是从from到to from表示起始位置，To表示结束位置，默认情况下是从from到to，也就是说你看我第一次执行是from到to，第二次是不是还是from到to，第三次是不是还是from到to，也就说它的方向是不是一直都是那个啊，一直那个，那我们能不能改变的。

的方向呢，哎，我们还有一个东西叫做animation的一个direction direction表示的是一个这个方向啊，方向第一个值的话，我们来看一下normal normal就是正常的，你看。从左往右，哎，这不是从左往右，从这个向to直行。哎，我们来说一下这个啊。这里边呢，我们来说一下animation的一个这个direction，哎，Direction它是干嘛的呢？它是指定我们这个动画运行的一个这个方向啊，运行方向它的默认值叫做normal啊，Normal它叫什么呢？叫做从我们这个from像什么呢？像我们这个to运行每次都是这样，每次都是这样，所以这你写了一个animation direction，如果你这写了一个normal的话，那这个时候它的效果就是就是我们看到这个效果，它是默认值嘛，它是默认值啊，每次都是效果，每次都是从from到to，一定注意它跟左右没关系，就是from是什么，To是什么，它是按照这个值去执行的，然后再来看下边我们还有一个值，叫做一个rewards rewards你看效果，哎，干嘛了？

哎，是不是反着执行啊，哎，反着执行啊，我这normal调整一下顺序啊，这个是我们的一个可选值，可选值我们下边一个rewards rewards就正好是反着了，Rewards就变成什么呢？就变成从to，哎从to向这个什么呀，From运行啊，从to向from运行，它是正好相反的啊，反方向运行，然后还有一个是我们叫做一个这个alternate alternate我们来看效果。

Alternate开效果看到了吧，哎这东西应该一下就看出区别了，哎什么什么意思呢？它还是啊alternate也是从from到to运行，但是哎叫做什么呢？重复执行时，重复执行时叫什么呀？诶逆哎叫做。重复执行时反向执行啊，重复执行动画时，哎，它会反向执行什么意思？我如果用的没写，也就是说我用的是normal，那这个时候就先从这个from到to，然后回来时候是不是还是从from到to啊，哎，而我如果设置这做alternate以后，他去的时候从from到to，回来时候就是从to到这个from，是反着走啊，哎，反着走啊，这叫做一个alternate，那同样还有一个叫做alternate，一个rewards啊，Alternate reverse。刷新看效果，你看是不是从兔往from走啊，哎，从兔往from走，回去的时候从from往to走，所以这个时候它正好是一个他自己的一个逆序啊，就是一个al的一个revers。

Ctrl c al，一个rewards，它是从to向from运行，像from运行，哎，也就是它们其实呃都是对应的，对吧，都是对应的啊，这个规则你要知道一下啊，知道一下我让他执行两次，别执行太多了，执行太多的话，待会我这个录屏的文件就会比较大，是吧，我们执行两次，那这样的话，我们这又多说了一个叫做一个direction，我们动画的一个执行方向啊，动画的一个执行方向，然后还有一个什么呢？还有一个我们叫做一个animation的一个叫做一个playtate playate这是干嘛的呢？这个是设置我们这个动画的一个播放状态，设置我们这个动画的一个执行的一个状态，哎，状态什么意思呢？看着啊，Animation的一个这个playtate，比如说我这写一个running啊，第一个值我们直接写1RUNNING running表示什么意思？表示动画是运行的，所以默认就是running，动画是不会行的。

那你也可以换是吧，我们来说一下可选制可选值啊，第一个是我们这个running，它是一个默认值，我们这个动画什么呀？动画执行啊，动画执行还有一个值，我们叫做一个这个post啊，Post表示什么呢？表示动画停止，你看现在动画就是一个暂停的状态啊，暂停的状态，这表示一个动画一个什么呀，动画一个暂停，动画暂停，那这东西有啥用呢？其实它就是控制动画停止和播放的，比如说我现在这改一下了，我这干嘛呢？诶当我鼠标一到这里边以后啊，把这住了啊，CTRLC把这住了，当我鼠标一入到这个BOX1以后，我就让动画暂停，否则就动画知识运行，你看现在运行的我移入是不是就停了，移出又运行，移入又停，哎，是不是就可以通过它控制我们这个动画的一个运行状态，你可以它运行。

也可以让他去暂停，是这么一个作用啊，好，这是它，然后还有一个我们最后一个，我们叫做一个这个animation的一个field mode film mode fill mode指的意思其实是我们这个动画的一个填充模式，动画的一个填充模式什么意思呢？它的默认值啊，的默认值是nu animation的一个feel mode默认值是一个nu now，什么效果啊，我们先把这住了，我们不让它反着执行，我们让它正向执行，我们来看我们这个动画默认情况下，它是从从哪啊，从这个from往这个to。执行我们执行一次啊，从from往这个to执行，执行，哎执行完了以后，那注意了，现在动画执行完了，执行一次，执行完了他干嘛了，它是不是又回到开始位置了，哎，开始位置了，所以这里边我们的那就是这个意思，那就是这个意思啊，那是什么意思呢？那它是一个可选值，可选值我们叫做一个nu啊，它也是一个默认值啊，默认值什么效果就是我们这个动画执行完毕，我们的这个什么呢？元素回到这个什么呀，初始位置啊，就是回到什么呀，回到它这个原来的位置啊，回到它原来的位置，那现在我们这个元素原来的位置是不是就是那个零了，所以就回到零了，我们这块区分一下，我们给这个BO2呢，我给它加一个margin，加一个margin left的，我给它来一个这个十像素，它是一个十像素是吧，我现在给它加一个in，是一个十像素，那这里边注意了没，来看效果。

他一回去以后，他是回到哪了，他是不是回到了他的那个十个像素了，哎，不是回到十个像素，他是不是回到这个in life了，哎，那你看啊，我把这动画呀，我要给它去掉，我现在不让他去执行这个。

往上写啊，这个位置，那这个时候它其实还是一样的，也是往从左往右去行，那这时候他是不是还是回到了这个最开始那个位置啊，但是我如果不给他设置这个动画。不给他设置动画，我应该是下边有样式把它给覆盖掉了，我们来看这是不是显示的写着一个margin left0啊，哎，来，我把这改过来啊，这是捣乱。我们就给它改成一个十像素保存一下，现在它是是十像素啊好，现在我开启动画啊，开启动画，开启一个动画，这时候保存，你看它开始执行动画，执行动画执完了，然后回去，回到哪了，是不是回到它十像素那个位置了，哎就说它慢，就是默认值，动画执行完毕以后，回到元素，它在原来的那个位置，就是它原来的哪，它就在哪，原来就是marin left的时，所以它就回到那个什么呀，那个十个像素啊，就那么个意思，然后呢，我们还有一些可选值，还有什么值呢？哎，有一个值我们应该叫做比比。

Be叫做be forward啊，有一个forward啊forwards forward什么意思呢？Forwards叫做一个前边啊，前边forwards什么意思，我们先看效果啊，这一保存执行动画，动画执行完毕以后，你要看它停哪了，执行完毕了就执行一次，已经执行完了，它是不是停到了最后那个位置，哪个位置也就是停到了to这个位置啊，你看这to你写你写哪它就停哪，你写600它就会停到这个什么呀。停到600啊，停到600，所以这个时候我们的这个forward其实很简单，就是停到我们这个什么呀？哎，我们这个动画执行完毕啊，它会什么呢？我们的这个元素会什么呢？哎，会停止在我们这个叫什么呀？哎，动画这个结束的位置，也就是那个兔的位置啊，结束的位置当然也不一定是to，看你动画值的方向是吧，就结束的位置啊，然后的话还有一个值，我们叫做一个backward啊，Backward表示后退回去，但是这个时候我们来看的话，你其实呃，你看不出什么区别啊，你看不出什么区别，那这里边我们得对比着谁看呢？对比着啊，我们得把那个底类啊给它打开，底类呢，我们得设置一下底类底类底类滴滴。

李磊跑哪儿去了？啊，比雷在这儿，我们把延迟给它打开，延迟的话，你看现在我们现在这个动画是延迟两秒执行啊，那这样我动画我给它加一个，我给它加颜色的变化，我这儿给它来什么呢？From background color background color呢，我这来一个这个orange，哎我它颜色从什么呢？从它那个orange往哪变呢？哎往这个红色变。Background color，我们直接来一个红色啊，我们来一个red，从这个橙色往红色变，那这个时候他在执行动画的时候，它又会出现了，多出了一个颜色的改变，那这里边我们来看默认情况下，也就是说我没有写这个feel model的时候，哎，Mode的时候，这个时候你注意它在延迟的时候，你看它有没有任何变化没有，也就是说他在去延迟那个状态的时候，我们这个元素它是没有任何变化，它就是干嘛，就是没有执行动画那个状态没有任何变化，就跟没动一样，对吧，这是一个，但是当我们把这个设置成backwards以后，你看效果啊，我们这一刷新走一个，你看什么效果了。

同样是延迟两秒，但是这个时候它的延迟状态是一个什么，是不是就它就变成了我们这个这了，哎，变成from这了，所以这个时候你必须得通过这个延迟才能看出啊，叫做一个backwards啊backwards我们叫什么呢？哎，动画什么呢？动画这个延时啊，延时这个等待时啊延时等待时我们这什么呢？诶我们就直接元素，诶就会什么呢？就会处于我们这什么呀，哎处于我们这个开始位置啊处于开始位置，所以如果你不写的话，那它开始的时候，延时的时候，它就是这个状态不变，但是你设置了backward，它就会干嘛呢？它就会变成一个，就是已经直接等的时候就已经变成from啊等的时候变成from，叫做一个backward backwards还有一个叫做一个boss，那你看啊，Backward你在设置的时候它也是一样，结束位置是不是又回到了他开始所在那个位置，哎，回来一个位置，那这里边我们来一个boss boss的话就具备了两个特点。

延时的时候就直接跑开始位置了，然后结束的时候，那就是在这个什么呀，结束位置啊，就在结束位置，所以boss是结合了两种什么两种特结合了什么呢？我们这个four wordss，哎，Four wordss和什么呢？和我们这个BACKWARDS2个特点啊，延时的时候直接跑开始结束的时候就停到了结束位置啊，这么一个feel mode啊，这么几个值，好，那这个是我们说的一个这个animation，总结一下animation几个属性，第一个animation，第2ANIMATIONATION，第三个animation delay，第四一个animation的一个ation的一个count，然后还有一个我们叫做一个animation playtate，还有一个叫做animation direction，还有一个animation film mode啊有也也是有这么多属性，同样它也是简写属性，跟我们那个规则是一样的，其他的没顺序就是那个。

直接跟那个延时，就跟那个那个delay，你要注意他们顺序，那个写前边，Delay写后边，所以这里边你要写的话，我可以直接往后写，比如说我写一个这个test，表示我们要执行动画的名字，写一个两秒，这就表示我们动画执行的一个时间，它是不是执行起来了，哎你说我需要它延时，我需要它，哎不停的执行，那你就来一个infinity是吧，Infinity就不停的执行了，你说我想执行执行执行执行两次，你就写一个二，那这样他就会执行什么呀？哎，就会执行这个两次，你说我想延迟，延迟一秒执行，那你就写一个一秒，那这时候他会等一秒才执行啊，等一秒才执行，你说我想干嘛呢？哎，我想让他回来的时候是这个，哎，是这个这个这个这个从去的时候从前往后，回来时候从后往前，那我们就来一个alternate，那这样他就是，哎，回来的时候就会。

就是原道返回，它不会直接回去，对吧，它也会有一个过渡效果，这是一个，然后其他的也是一样啊，也是一样，然后你说我让它停，那你就pose PA paued这样的P，但是P就没用了，对吧，就不动了啊，所以这里面也是除了两个时间有顺序要求，其他的都没有顺序要求，那这个就是我们说一个啊啊alternate alternate做完了以后，我们可以做个练习是吧，那像我们刚才做那个米兔那个动画，你想一下我能不能用animation给它改一下，改成什么呢？改成是一个它持续动的，也就说我希望这小兔子一直在那跑啊，一在那跑，并且在这儿我还给你提供了一个这个图片，两个图片，一个是这个小人这个，还有一个是这个创这个是吧，哎，特朗普这个跑这个特朗普这个它是有点，它是四行，一个朝前跑，一个侧面跑，一个朝后跑，一个朝左跑是吧，它有四个方向，那你用的时候你要想一下了，怎么去用啊，我想用哪个，其实跟我们那个，呃，那个SP那个雪碧图是一。

就是雪碧图对吧，就是雪碧图自己尝试着去做一下啊，尝试做一下，我们待会儿来讲这个练习停一下。