48.尚硅谷_css3_动画.wmv原创

OK啊，不但有听懂，而且要深入进去啊，好，你们对APS这个掌握的话，应该要比一般的要强，要强很多啊，OK，来看一下关键词。CTRLCCTRLV05关键帧。这个名字好长啊，关键字是不是，我们首先来看一下关键字的第一啊。好。语法。是不是就是个加一个any面型的name就可以了，是不是里面跟的是什么关键帧的选择性啊，再跟CSS声明。能理解吗？OK，也就说你这边写的是CS选择题吧？不是啊，写的是这几个B选项动画持续时间的。百分比啊，有代表0%，To代表百分百，当然你可以定义其他的百分之值，百分数的值怎么讲，比如说我们来看一下，比如说我们这个关键在里面，我们现在是不是方导图啊，那我就是0%~100%吗？

能不理解，看我们这个过程现在是不是有稍微有些复杂，那给它搞得稍微干净一点，肯定就是这个呢。嗯，Boss就boss吧，让你就让你吧，三次就三次吧，延迟就一下吧，这个改成。那会比较好一点啊，OK，来看一下。应该还是一样。是不是没有没有太多区别吧，我这个东方稍微跑快一点。跑快点干啥，一秒嘛，是吧，走你。等一下一秒两秒三秒是不是OK，那大家想想哎，我在这边我再写一个50%行不行，比如说50%我让你去。

对。负50的位置，这里刷一下。有没有看到一个加速的过程，是不是这个0%~50%代表的是什么？是时间，是时间。懂吗？你说这平分的是时间，是不是时间，你看我是不是前前一段时间干嘛，前一段时间走的路比较短啊，后一半时间走。走路比较长啊，那我前一段时间的速度是不是稍微慢一点，后一段时间的速度是不是稍微快一点，你们走的路不一样吗？时间是一样的吗？那不讲来看一下是不是这样的过程走你。是不是相等是不是？切记，这个百分比代表的是时间点。能理解吗？可以想想，我问你这个关键帧是不是用来定义动画的形式的？

是不是啊，那你想一想跟他会不会产生冲突？这个来干嘛的，动画形式的关键是干嘛。控制动画形式。是不是是不是就产生冲突了，看一下animation time function的定义。对于关键帧动画来说。Function作用于一个关键帧周期，而非整个动画周期。即从关键帧开始到关键帧结束什么意思？这个time面方形是作用于谁的周期的？关键帧周期的，这叫一个关键帧周期。这是另外一个关键帧周期。整个关键帧是作用于。动画周期。

那么讲说明它的概念的维是不是更大一点，他面方形概念的维度更小一点。是不是啊，我们可以来看一看嘛，比如说他们里面是不是懂嘛，有步数的是不是啊，我们说让你干嘛，他平方在哪边这边吧，STP是不是我让你一步就完。是不是按照我们之前想法的话，是不是到100条的马一步走啊，来看看。这什么鬼，这个什么鬼，一次两次三次啊，这个叫过去了是不是这这什么鬼啊，走了三次的。关键数应该是负100~50 50让你一步走完是不是啊一步走完。

走了三次，想想好像有点不对劲。看看。最终反正因为我是boss的吗？是不是一开始肯定是从你头上开始啊是不是。最终肯定是要到这个位置的，是不是啊，然后我整个周期，哎，好像这个维度的概念是不是要大呀。想想STEPS1步是不是比如说我们把这个。周期弄好1.0~50%，我让他们从负100走到。想想我把它分成。几端的25%吧，还有25%也是一段来看一下全是掉走到。

50这走到零是吧，75%的时候走到50。是不是啊，来看一下这到底是是一个什么样的过程，现在我是不是它平方个性暂时我先改成线性的，看一下早年改成线形的。一下两下三下就停了，这没有任何问题吧，OK，那我们来看一下，因为我这个时间是不是正好是给的是一样的，OK，来看一下往我说这个代是吧，我分成说所有的东西是不是一步走完，他面发个屏干嘛，我们说第一个参数意思是把动画分成。N等分吧，是不是斯三等你们应该知道什么意思？是是啊，OK，求你。

看下刷下。一次，只能是这一周年。他把最后一忽略，是不是最后一被忽略掉了，这为什么？是我写的哪个属性被影响了吗？是哪个视频有有影响看看。应该没有什么影响啊，是这个boss吗？分成一步嘛，现在我这个周期变长里变成总共跑几次，一次两次零到25%嘛，一次两次三次四次吧，那我就给给四秒吧，是吧，来看一下。嗯。刷一下。123。上去了。二三。

是是不是我这个boss影响了，是不是，你看我是不是跳三步最后没有去对过，为什么没有去对过，因为我第二次动画转吗？装这个位置开始的吗？是不是，你看我循环第一边，关键是不是干嘛从到图的，你看我这个点是那么的吧，那我在这边循环的时候是不是重复了。是从0%~100%的吧，本来我们说我们说我们这个台平方形是不是控制的这个零到百分之二十五一个周期啊，本来零到25%应该是平滑过去了，现在是不是一步跳过去了，一步跳过去了，一步跳过去了，是不是跳了三步啊，本身应该从75%要跳到百分百的吧，可是我第二次动画是开始的，他跳到哪边去了？是不是直接干嘛回去了再来三步。在。回去吧，123这种回来。

这个过程能不能理解，是不是这样的，说明他们问题是不是控制的是一个。关键针周期啊。那么你讲我们看这个过程是不是讲了说下一步。两步三步回去一步两步三步回去一步两步。三步四步没问题啊。能不能理解，那我说怎么样，这个效果稍微好一点，我们说这边应该改成什么。了那吧，是不看这个效果，现在怎么样了上来。一部两部三部四。诶，一步两步三步。是不是这边我们放的最后是的，看这个默认是不的。

目的什么样的，是不是在你这个动画什么时候。结束结束的时候吧，是不是啊，我们是不是从。怎么来的？是不是这样来的？是不是啊，OK，我们说那我们应该上它应该怎么样。一针两针，这是不是，这是不是干嘛，因为这个周期现在谁来控啊。一步来空的嘛，是不是，那就一步过来，两步过来，三步过来，现在我应该去哪。是不是应该来这步的，他好像不是这样的吧，是不是来看他怎么的？一步过来，两步过来，三步过来。哎，等了两秒吧，是不是好像压根就没有来这个什么。

最后诶，最后是不是过来了，是不是是不是最后一次干嘛。这是不是我第一次从这边走的，一步两步三步，他在这边等了几秒，等两秒吧，他没有下去吧？想想没有下去，这是为什么？那你们在干嘛？是不是一步啊，是不是啊，那我们说如果是来看一下。我不要延迟了，延迟我们给个零秒，我们再来看一下这个过程。周年。上来就有吧。是不是就过来了，治不了你看。反正他会省略到最后一步是不了，也就是说你这个时候的话干嘛。只管你动画外的属性嘛，是不是也就在你boss的时候才会到头部位。

是不是在整个动画过程当中，他还会取得文吗？总会省略最后一步啊，这好奇怪。是不是啊，我就感觉他应该不会这么跳。我们来看一下，如果是线性，它会怎么走。应该是不去最后的吧，是不是啊，可是你分步数的时候的话，真的有点难搞。回来了，这个时候我们可以什么理解的吧？问题是你在步数的时候就出问题了。是不是啊，比如说代表上来什么意思啊。上来懂不懂，上来不懂吧，是不是上来其实会会等的，一步两步三步。没有下去，等了两秒再上来了，最终下去。1234下来了，是不是相当于步数的时候，是不是没有没有下去。

是不是啊？OK，那我们重新来换吧，我们换个步数。他下去了。实际上眼睛看。那不可能来看一下，我们这边来把它换成由由慢到快吧，来看一下这个一刷一下。说下easy in easy in easy in easy in很明显是是不是有个easy in的过程呢？是不是我们说这个easy in，首先你能不能确定这个一每次都是作用在零到25%，25~50 50~75 75~50，说明这个说明这个他们方形肯定是作用于这么一个区间的，这没问题啊，整个动画区间是由它来控的。是不是纬度上是不一样的，关键帧代表的是整个动画周期，是不是，而我这个弹厅发布型控制的是关键帧的每个周期，是不是这件事情能不能确定啊，可以确定是不是就这两个API没问题啊，只不过我们感觉这个步数上面是不是有问题啊，啊，因为我也从来没有用过这个步数，我们来看一下。

我们说如果是一部大的话，是不是是不是相当于什么。本来一步到这边嘛，两步。三步总共是应该走四步，从负一的位置到的位置啊，他怎么走的。一步两步三步，这步有没有下去啊，没有下去吧，直接跳什么。跳这过来了吧，是不是直接从那边过来了，只不过这边这个周期他等了几秒。两秒吧，是不是啊，我们来看一下吧，这个你看一下API。选出C，看一下API上面怎么说。

是这个步数的根吗？跟我这个属性值有关系吗？属性值的解释是没有任何问题的吧，这个控制关键的周期，这个整个动动画的周期吧，主要是对这个步数的理解，我们看它是怎么做的。CSS吧，只有你来看一下这边。那。他有说吗？Animation time吗？定义了CS动画在每一动画周期中，每一动画周期中执行的节奏吧，是吧，它是一个台面方形的值，来看一下他们方值它有哪些？有被照是不是？OK，还有什么步数吧？OK，看这个给他翻译翻译，好像已经翻译过，是不是，这个步数到底代表什么，我们得看一看。没翻译，看起来就比较二了。

这些是不是都是它的翻译啊，我们是不是之前用的en的，看这一等。是什么意思啊，即使这是一部。可是这个function。也是分成很多啊，带着秒什么鬼啊，看一下吧。有道啊，那这就得看他规范上面是什么意思啊，咱们不能意淫是不是翻译吧？五标十负四五什么鬼啊，反正我是听不懂是不是OK，那我们就来看这个效果吧，稍微稍稍微的分析分析啊，OK。

首先我们说这两个属性不用分析了，肯定没问题了，就是我们对这个步骤的理解，是不是好像跟那个全三是不一样，我感觉啊。有点冲突，我感觉再想想，如果我把它分成两步，我都要看看，默认这是摁的吧，两步我看你怎么走。首先看走走几啊，来看数下吧，让他来个延迟吧，首先看他总共走了几步，CTRLC。等两秒，1234567，最后一步没走是不是，你看我们说总共，我们说总共里面有几个一针。一针两针。三针四针，按照我们道理的话，每一针走两步，应该走八步，可是他就是走七步，是不是最后不就是没走吧，是不是改成什么。

改成五步跟改成一步一一个技术嘛。改成三步是吗？一样吧。一二三四五六七八九十十一最后步没走，本来应该是三乘42步吧，可是最后不就是啊没走啊，这是A上的事情，那那我们就不管了是不是，反正他就是干嘛，照我们的理解的话，他应该是走到最后一步的吧，走完12步在干嘛再往回走了吧，他就是多。11部最后一步就在那边等着呗，是不是啊，反正整个动画过程当中，它会触碰到这个底部嘛。不会。是你们可以来看一下，刷一下走，你走肯定走一步。走11步，回去再走11步。是不是再回到最最的。

底下能理解当中是不是就是少了话能理解吗？OK啊，可是这个其实这个函数用的什么。用的不多，能理解吗？啊，可是我们在在我们的DEMO当中，我们做那个TOC动画的时候确实是。