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

OK啊，这一节课我们过动画的API啊，其实今天API学的不多吧，基本上没学什么新的API吧，就是3D相关的一些属性是吧，其实API不多，只不过3D里面属性的话，几个API可能都会啊。关联程度比较大，可能稍微稍微有点复杂啊，然后动画的API其实是比较简洁明了的啊，你们可以把这个an跟我们之间的全三型做一个对比啊，全身型一般我们叫过渡啊，可是稍微叫的专业一点，应该叫过度动画，懂吗？可是这个anim啊。就可以直接叫它动画啊，我们来看一下这个animation啊，我们看全身性强在哪？OK，好，我们来说今天最后的东西啊动画。OK。好，动画我们来啊。

这样吧，我们来与动画的初次邂逅，OK，第一啊，动画初次邂逅是个病句的。OK，来看一下动画咋完还是一样吧啊，我们再来写一遍吧，来，来个div吧，是不是来个ID，一般我叫万法，是不是现在叫test一样的啊，还是叫外万法里面我来一个div啊，这个div给个ID叫做test OK，然后呢？哎，一些暴力的事情是不是OK，干掉干掉。OK，那这个外部稍微搞大一点，OK啊，搞一个YY。300PX，嗯，Hat也为300PX是吧？来个边框1PX的实心是吧？OK，让它居中一下，马型上下为零左右o two啊这样吧，给个200PX应该稍微下来一点，OK，那这个盒子应该就下来了吧，是不是好？然后我想在这个盒子里面有一个元素。

啊，有一个元素叫做test啊，Test在这个盒子的内部啊，West had也是为100片是吧？好，然后让它居中啊，OK那句中，今天我们学过一个新的方案，是不是OK？我们说啊，Position属性比较重要，Position absolute left为50%是不是right为不是top为50%走然后呢，Transator可以直接写3D吧，是不是OK，负的50%，负的50%，切记零是不是好走，你给他一个背景，Background是面颜色，世界上最美的颜色走。

OK，完事是不是诶不对劲啊。3D没问题啊，XY就是负50%啊。我附体和这部剧中又没事。他他有跟我要这个test在它内部去，哦不对，他应该有个position，为什么应该称它的定位吧，不然玩个什么是不是是不是，OK揍你是不是就会了，OK，你不按照我来定位，你还跟我居中是不是，这不扯吗？OK，来看一下好那一样，秋海峰，邱海峰啊，主要是张晓飞同志没有在你们前面上课。不然这样会更好黑啊好，嗯，来稍微写点样式吧，Text等于center是不是？嗯，方程OK 50PX走，你100PX，微软AOK，完事。

是不是好人？空白太大了，虽然说它本来就很大，但是好来看一下是不是啊诶。呃，好，应该是圆的，嗯，50%找你啊，OK，好好，以后他们黑我，你就不要不要理他们好吧，这样他比较尴尬一点就可以了。那他就不会黑了，来看一下好，我们之前写动画的话是干嘛，我们说在你这个外干嘛，我们说外让你后上去的时候让你底下谁啊。太吧，我们说待会你干嘛，比如说全是维度啊，旋转吧，是不是转个三度，哎，这这是不就出来画。是不是？

哦，一律写。诶看到这个方案可能会稍微有点问题，是不是啊，你就没有办法干嘛，这个全方面就没有办法再去做操作了，因为你被他垂直水平技术给干嘛。用掉了是不是啊，幸亏我们这个圆柱是有过宽的是不是啊，好，现在能，诶是不是可以感觉到它的一个。是吧，他的一个局限性了，是不是OK，这里那就干嘛，那没办法，我叫兵来将挡，水来土掩是不是，反正我们方案都是是是不是你不让我用这个，我就要那个，是不是，你说那袁袁素说。诶，上去的时候你看是不没有啊，因为你没有动画是吧，一开始我们说动画是不是这样写的，圈三形为个三秒钟是不是就出来了，是不是，可是我们说这种动画是不是自己来，你自己来触发的，有没讲OK，看一种新型的动画体式，不用全在形啊，这个东西完全都不要好怎么办？有个属性叫做animation，是不是animation是有这么多属性组成的，第一个属叫animation name跟决赛性name一样嘛，指第一个要动要动画的属性嘛，我叫animation。

内蒙是不待我要去的话全是父母，是不是这个玩要去的话OK好。动画是不是很好又卡OK，然后我们说你只指定一个动画的名称行吗？不行，百分百是需要。Animation之前我们是不是学过全name全，那这边就是anim name跟anim吗？啊，全三星没有name OK啊，我们说全三星是没有name的，不是啊，说错了，应该是全三形啊，我们组这animation应该跟这个。

全赛区。啊，对象对应起来啊，可是也有区别啊。这边不是啊，我们的全天不的是你要动画的那个属性啊，这边不是属性是一个关键帧的关键帧的名称。好，这个干掉。刚刚我们说的而是是不是，而是什么，这边我说不是你要动画那个属性，而是关键帧的名字啊，也就是说你这个动画使用的是哪一个关键帧，From to什么意思，一开始的时间跟最终时间，就是你一开始是什么样的，最终要变成什么样。能不讲，比如说一开始我要你这个圈是什么RO零度，最终我希望你这个圈子帮我做什么。360度RO360度能不讲OK，这样行吗？

还没有时间animation什么？我说几秒钟。三秒钟看一下走，你上来有没有，需不需要你自己触发上来自己玩，是不是直接干嘛使用上这个关键帧就转了。三秒钟转完吗？能不能理解好，OK，那这是动画最基本的形式，能不能看懂，Name指定的是一个。关键帧的名字，切记不是可动画的属性名称。是关键帧的名字啊，关键帧里面有front door to，这里面写的是什么？一条条声明。现在你们听懂一条条声明懂吗？好，OK，好，那我来看，那这么简单就完事了吗？我们说全三性还能指定你的过渡形式吧，啊，这个它也是一样啊，它代表你看我们name属性指向应用的一系列动画吧，每个名称代表一个由定义的动画序列，那么的时候就代表什么无关键证么，然后有关键就什么拿到内就可以了，然后他就会按照这个keep所定义的动画的形式去进行动画。

有讲OK，第二个是嘛，指定一个动画周期的时长，默认值为零表示无动画吗？如果有值的话就代表什么。你要执行周期为多长嘛？单位为秒或者毫秒，无单位值无效，注意复值无效，浏览器会忽略该是零，懂不懂，OK，那有些浏览器可能会把负值当成零秒，那你就不要管了，你不要写负值不就行了吗？有些同学喜欢死犟干嘛？赋值没用，就喜欢用负值，我得测你一下啊，开发的时候也用赋值，看看你的浏览器好不好？我说你是不是傻啊，人家都说副值不要的，拼命要用物值，我也是治不了。

啊，就是复制无效就不要用它了，能不能理解，不要把这些API说复制无效，只是告诉你一下就不要用它了吗？懂吗？OK，不要钻牛角尖啊。那我们来看一下这个，哎，你们先弹方形好吧，你就告诉我熟不熟吧。这都是什么鬼啊，我们都有，之前都遇到过，是不是来看一下，默认情况下你看他是怎么做刷一下。是不是先加速后减速啊，来我再说一下，你能看到先加速后减速一样的easy嘛，是不是，那这些字我就不测了，好吧，我测一个animation tell me方给选什么，看看线性的是不是就可以了，来看看是不是线性的走你。匀速的，你看邱海峰云输的再转是不是啊，OK，走，你好，那待会我会反过头来再来梳你那些东西等等，现在好像跟全三星差不多，只不过比全三星多了一个关键针，想想这个为什么叫关键帧啊？

就能指定每一帧的，最起码我们能大概指定每一帧的一个样式了，现在你们还看不到，因为你只只看到了一个图嘛，是不是OK，那再来看，哎，你们心。延迟啊，就我的天呐，是不是你感觉这个API好像啊，是不是，是不是心里特别爽，是不是待会让你们哭，是不是看着走你你们写什么，你那比如说我让你延迟个三秒，是不是看一看走你刷一下123动。哎，你看是不是就懂了，是不是延迟三秒吗？咱必须听话，我设置三秒啊，不听话，浏览器坏了，来看一下，那这个也简单，是不是好，再来看还有什么。Animation。It是吧吧，应该叫啊，好像是读吧，还是读啊，应该是多看吧，大家来看默认情况之下，你这个动画的执行的次数，你看123走，你一次做完一次就停了。

我希望你跑多姿呢。是不OK，那我们说干嘛，这里延迟时间给慢一点，一秒是什么你什么，是不是让你转个三次是不是啊，OK，走，你等一秒。一次两次。三次是不是？停好，刚刚那个过程有没有看到延迟了几次。一次OK，也就是说animation对他起不起作用。不起作用。记住，这个东西只管动画内的属性，这个animation delay是一个动画外属性，这叫OK啊，这跟过渡就有区别了，懂不懂好概念就要来了。

好，睁大眼睛，动画外的属性OK啊，眼睛睁大一点。CTRLC，前面三个都是动画内的属性，懂不懂这个东西，它只会作用于动画。只作用于动画内的属性，不会作于动画外的属性的，那么讲啊，全身我就给你们干掉了，这个也给你们干掉了，没讲干就来了，懂吧啊，眼睛睁大一点啊。好啊，眼睛睁大一点，其实我遇遇到过一件很尴尬的事情啊，我在大学的时候上课明显没有睡觉，可是辅导员给我拉出去一直说我上课睡觉啊，这个眼睛大还是有优势的，OK，来看一下，好，我们说，哎，这里面分了动画外跟动画片的属性吗？好，来看一下，嗯，我们看是不是还有个animation。

不行啊，这个是代表动画执行的次数是吧，属于动画内的范畴，他只管动画内的东西的点类，属于动画外的范畴，记住前面三个都是动画内的范畴啊，它只会影响动画内的属性，OK，来看一下这个animation。Direction这代表什么意思啊？运动的方向感是不是它也是一个动画内的属性？走你来看一下，比如说现在我们运动的方向，其实默认值都是normal，某正常的方向，正常是一个什么方向？找你顺时针方向的是啊，那我看能不能他干嘛。你看三次都是顺时针的嘛，是不是OK，我想它逆时针咋整反转是不是就可以了。来看一下只。是不是倒过来转了，是不是转了几次啊，三次嘛，是不是能不能理解啊好OK，那再来看，嗯，那这反转反转的到底是什么。

一开始顺时针，后来变成了逆时针，是不是OK啊？大宝贝们听住啊，不是没有那么简单啊，比如说这边我不让他赚360，就300，看着如果我是挪，他到底是一个什么样的转法啊，现在是不是三次啊，是不是这是不是重复啊，到底重复什么？这是不是反转啊？这是什么？控制方向到底控制谁的方向是不是？首先来看重复，到底重复的是什么？走，你等一秒吧。转到300度。转到。300度重复的是什么？An重复的是冠。From to from to，零到300度，零到300度，零到300度再来看一下，说一下看是不是零到300度。

到300度立马跳成零度，到300度立马调成零度，看着。是不是重复的是什么关键帧能理解啊，再看反转什么。走，你等一秒，从哪边开始转？300度这个位置可以做吗？你看吧，我刷一下等一秒300度这位置知道吗？是不是等一秒之后立马去这个位置啊，然后什么。能理解吗？问你重复的是关键帧，反转的也是关键帧。能不理解再来看反转。我们说这边干嘛他。反转的是关键，这是不是这里我们说这边重复的。

也是。重复的也是不不重复的是关键是对不解看，首先我们刚刚说了这边是不是线性的，比如说我帮他换一个，我不让他拧，不让你是线性的，我让你是干嘛。加速的由慢到快吧，一码加速的过程吧，是不看。好，我把这个时间放大一点。现在是不是三秒，我放这五秒，是不是我只让他转一次？看着我让他等两秒，看着OK，刷一下这里。哎，这不是反的，我干嘛normal OK，看它是一个什么样的过程，是不是一个加速过程。是不是一个加速的过程？是的吧，OK，再来看我把它干嘛改成。

如果是，你看是不是一个减速的过程。立马跳300是不是一个减速的过程，是不是问你反转有没有把动画的形式也给反转掉？有没有和？Anim function懂不懂，这叫熟悉API，能理解吗？讲跟人家讲的时候，这种是你需要去讲的啊，不要讲这些API内去指定一个关键的名字，谁都知道能不理解啊，OK，那再来看，好，那我们讲到现在了，我们说其实我们说我们的anim的动画就是跑的是关键字。是不是想想关键这里面怎么定义的，他他他应该怎么去执行吧。是不是这样的，而且我们也讲了里面比较两个比较重要的一个是。控制方向的一个是啊。哎，什么count是吧，这两个都是作用于。

关键真的还有一个比较重要的点，它是一个动画外的属性啊，API的这个难易程度来来上来讲的话，它比全身性要难很多。懂不懂？可是使用起来的话，它比全身简单啊，因为我们使用全三星的时候会踩很多坑的了，它身上其实没有太大的坑，懂不懂，只不过API变复杂了。OK，这个需要你们记住的是吗？OK，我们再来看它还有什么A片。好，我们刚刚讲什么in count吧，Direction吧，是不是还有一个animation feel Mo？好，来看这animation Mo是干嘛的？OK，那这个东西我要帮你们重新写掉，OK ctrl c ctrl b，零二。好叫animation model ctrl c ctrl v，好这里好这个弹怎么写呢？好比如说这样。

嗯，大家想一开始我是不是一个圆啊，好，我不让它变成一个圆啊，我干嘛，我让它是一个方块。OK，方块就是把玻钢干干掉呗，是不是，OK，它就是个方块吧，好方块我们想上面。整个盒子多高啊，300吧，我是100乘以100对吧？OK，那一开始我就让他在这个位置是不是啊，好，我说那你关键是开始的时候我让你干嘛，全是列车外，我让你去付100。OK，干嘛这一边的16，我让你圈的外围。100PX。好，再来看，我把这个信心稍微写的简单点，OK，总共我让他们三秒钟完成动画，是不是速度的话干嘛，云速是不是不让你反转干嘛？那么延迟个两秒，OK，重复个。三次啊，大家先不看效果，想象一下他应该会怎么走。

一开始元素是不是这样的。是不是啊，我问你一开始元素到底是这样的还是这样的。对，我不是有个两秒钟的延迟吗？两秒钟延迟的时候，我状态到底什么样的，是在你不让这个位置，还是在我元素本身这个位置，肯定在元素本身这个位置，动画一旦执行了，立马跳到这个位置去进行，动画就底下一次，就底下两次，就底下三次，动画执行完去哪？还回到原来的位置，看看是不是这样的，OK。交点等两表一二就上去做动画。再来一个。再来一个，做完看他去哪。回回家是不是还蛮乖的是不是啊，OK，也是什么一开始的和自己在原原本的位置啊，动画立马执行的时候去这个位置是不是，然后怎么去做动画from to from to from to。

是不是干嘛回到。干嘛回到一开始的位置，是不是等的OK，大家想想。我说其实我定义这个关键字的意思就是说干嘛。让你这三次运动都是从负100的位置到100的位置，其实我们定义关键帧就是想让你去到从负100的位置开始运动，到100的位置运到。三次，你不要给我去其他地方吧。能不能理解你说你一个开发者需要关注这个元素一开始的啥位置上吗？我只希望我在做动画的时候，你一开始就从这个位置给我走，走到这个位置啊，这件事情给我重复三次。很明显，现在这个关键帧有按我们这种方式去跑吗。

没有啊。能不理解那咋整啊？哎，就有个animation fair model animation model是干嘛的？Animation model，它是用来控制元素在动画外的状态。问，你元素在动画外，什么时候元素算在动画外？From之前，To之后，这叫动画外，延迟的时候是不是在动画外，动画外嘛，你之前的吗？To之后的是不是干嘛也是动画吧？OK，那这个animation fair model就是用来控制这两个状态的。好，它有几个词呢？第一个词叫back was，什么意思啊，他说啊，你元素。一开始的状态，让之前的状态跟的时候保持一致。也就是说，我在哪延迟？

刷一下在哪颜色的位置，也是等到这时候走三次动画。最终去哪个位置？还是回家？是不是，那还有个属性叫做他的意思是什么？他的意思就说你吐之后的状态跟我吐的状态保持一致。一开始在那等。还在这边的走。这是一次吧，再来一次，是不是再来一次？OK，动画要停了，在哪停，就这停。OK，那我的意思是什么？Boss就是从负100~100来一次。两次。三次。是不是这才是我们预期的，我们写关键就是这个意思啊。

是不是这样的，能不能理解啊，现在能理解是干嘛用的吗？它有几个词啊，一个叫back was，它代表什么？就什么之前的状态保持的一致，什么保持的和。也就让之前的状态干嘛与与状态保持保持一致，还有呢，还有一个叫什么for，是不是for代表什么意思啊。To之后的状态与to的状态保持一致，Boths呢，Th boths呢，Back was加好不好理解，OK，这里面比较重要的概念是动画Y的状态到底指的是什么啊？这个延迟就是代表动画外的一个属性，这能理解吗？OK啊，这些API还是稍微有点弯的啊，自己转一转，OK，那来讲最后一个API啊，这个应该就比较简单掉定义了，动画执行运行跟暂停是不是OK来看一下。

好，这个也去写个弹吧。CTRLCCTRLV。OK03。运行跟暂停吗？什么意思啊，也就是我要控制这个动画停下来嘛。是不是啊，咋停了呢？他你看我这个动画上来是不是自自己动的很烦人，是不是自己动的，OK来看一下。我们说play是不是OK，它的默认值其实叫做现在我是不是等了诶。

哦哦，应该是boss吧，Bo。Both吧，好尴尬。OK，只好说一下，好，不要让你有延迟了，延迟个一秒吧。OK，只你。OK，这是不是在做动画？OK，来，我来个狠的什么？我说你动画说到一半，我让你停下来是不是？谁让你跑的是不是？OK，不准让你跑干嘛？肥就肥了，在你什么说位上就让谁。让邱海波同志停下来。也说我喝的时候干嘛，你别给我去动画了是不是啊，烦不烦啊是不是干嘛，哎，你们什么。Play吧，好，有个叫什么post，其实它默认只是running。

对吗？来看一下走你。说一下。停停停玩你停玩你停玩你停玩你玩一年是不是OK，那其实默认值是什么？在外面啊，默认值在这块有个叫any，其实叫。Police其实叫running，懂吗？好，他一直在跑是不是？你跑你跑快点啊，停OK就停住了，鼠标出来再跑，能不讲OK，那到这一块动画的API算过完了啊，是不是OK，那里面可能有个点，我需要再给你讲一下我们刚刚讲的那个动画的方向吧，讲了几个方向。一个诺某一个的，如果是不是加两个方向，他其实有四个，我们来看看。CTRLCCTRLV。零四。Can you see animation。

来看这个啊，这个需要你们注意一下，来看一下，现在我们说这是一个什么鬼啊，看一看。它是不是可以暂停的，是不是啊，等个疫苗它可能是会暂停的吧，你看现在是不是永远是浮上到吐，上到吐啊，我想你上到吐之后干嘛，你给我这你给我这么玩。到吐了，吐到现在干嘛，现在你看我们这个玩三是怎么玩的。如果是normal就干嘛？To to，如果是。如果到我要干嘛，到之后到再到。是不是，那怎么办？来看一个是吧，来看一个叫什么，那来看一下刷一下。等秒到就。Two到from。

From到处。是不是一个球就要出来了，是不是来球球来了，OK，球咋来球球球波波S100%就是一个圆，是不是OK来看。走，你是不是来了，丢上去，你看装逼就下来了吧，好不好吧，晚一点是吧，OK，那现在我们是不是从上到错？那能不能可以么一下。你看是不是从下面上来的，是不是再回去，是不是啊再上去这能不能理解啊，OK，好，那大家看里面是不是有四个字啊，好来看一下现在还有什么API没过。

OK。好，那被上什么自己去看一下，这个我就不过了啊，OK，那这个步数应该也懂是吧，跟全三形一模一样的，能不理解啊，延迟啊，执行次数方向好model好，OK，那动画的属性我们过完啊，来我们讲一下。关键帧是不是到现在没讲关键帧啊，只讲那个to啊，OK，那这个视频先听听。