28.尚硅谷_css3_过渡属性&过渡周期.wmv原创

好，我们继续吧，然后啊，昨天我们讲的东西，虽然说啊，好像没有什么成块成块的东西，可是都是比较重要的东西啊，就是涉及到你这个CSS一个核心知识到底掌握的怎么样啊，那今天我们要讲C里面比较重要的东西了啊，前面讲的都是什么，可能说是CS3里面并不是太重要的啊，可是从今天开始讲过渡，2D3D变形，讲动画，讲布局扩展，这四块内容是CC3最核心，也是我们现在用的最多的一块内容啊，那今天我们从这个过渡开始讲起，那讲这些东西的时候的话，可能这个呃，GS代码就会变得越来越多啊，所以说大家干嘛要注意一下，OK，我们先开始讲过渡，好啊，因为过渡比较重要，所以说过渡我有专门的课件。OK，过度已变形。OK啊，这是我们过渡的一个课件。好，我们来首先来直观的跟过渡去打个照面。

OK。零二吧，过度吧。OK，首先来写个DEMO。我们说叫什么。零一啊，过渡啊过渡这个东西我们应该是跟他打过照面了，是不是OK，比如说我们再来个D吧，好给个ID叫test吧，走你。好，可是这一次我们要详细的来讲过渡，看这个过渡里面到底有多少内容。好。Y为200P啊为。啊，200PX啊，昨天咱们还讲了一个圆圆角吧玻是不是先来个50%，这肯定是个圆吧，OK，来一个背景来光为pink是不是OK？比如说这个你来个秋海风，秋秋海风是不是OK，只有你啊好看一下他在哪，他在这好那居中吧，Text alone等于。

生是不是OK，行高应该有多少？200行高对机线会不会产生影响？肯定会产生影响的，行行高对基线肯定会产生影响的啊方什么呃啊，我要搜一搜200PX，那这个行高就可以不用写，然后来一个乌软雅黑，看稍微大一点是不是在这边啊，好让他干嘛居中吧。又来写居中了，你发现就是居中这个实在是太常用了啊，所以说这个代码你闭着眼睛要给我干嘛？

能写出来啊，可是你们不要让我理理解，OK marin呕吐，整理看一下好过来了吧，好来看一下，我们说有个过渡是不是？呃，比如说干嘛我在我整个脖林。啊，我给玻璃啊，虽然说我们不经常去操作玻璃的样式啊，但是我在这边先写什么马定为零，判定也为零，是不是，我给玻璃来描个框吧，玻璃啊，干嘛呢？我让这个玻璃高度稍微的变小一点吧，变60%吧。可不可以这样可不可以啊，肯定不可以的。你HTML这个head干嘛一定要下来，HTM下来的话，你这个60%你到底撑到谁啊，是不是啊，你HTML都没撑开来，你这个玻璃百分那么干嘛什么都没有吗？懂吗？OK，给他个边框吧，1P的实心来看一下是不是在这哪OK。

嗯，然后怎么办，他稍微下来一点吧，这个马in top马top给个200P吧，让他稍微下来一点。好，嗯，给到了。差不多吧，OK，那这个宽度看着有点不爽，Y为60%，OK。好。嗯，那marin在吗？Marin上是100左右。左右凹吐下是零吧，涂个呀啊这种A稍微记得熟一点就过来了，好，我在玻璃干嘛后上去时，我说你这个玻璃啊，我在后面上去时候干嘛呢？我说让你这个Y根还在变。小一点变成一秒PX是不是，那这个字体相应的也变小一点，变成多少？

呃，做呢？30PX吧，是不是，那这边是不是也要变成100啊，是不是来看一下是一个什么样的效果。我让谁了，Body底下的谁啊，Test吧，Body后上去的时候让底下这个test的元素啊，是不是只有你，你看是不是就变小了，可是这个是不是太突兀了，是不？最后应该有一个过渡吧，我们说这时候应该是谁去有过度啊。他的元素吧，那我是写在哪，是不是应该写在这，是不是来一个全三形，是不是全三形就是我们C3里面提供的第一种动画形式啊，叫做过渡动画啊，OK来看一下，那比如说给个。两秒来看一下，走你。有没有一个过程，它这个字体有没有慢慢变小的过程。是不是也有，都是有什么过度动画的吧，是不是，可是你觉得比如说我一个属性。

我让他从block。变成了。是不是你说应该有过渡动画吗？有吗？不可能有是不是，所以说是CS，你看我们来看一下吧，那比如说现在的就是根肯定是什么，比如说我显示我来写一下，比如说这一边的我的电池play吧，是不是我在这边什么变成，那是不是来看一下有没有孤独的话走你有吗？瞬间变没了，所以说是所的属性都有动画的吗？切记不是啊，并不是所有的C属性都是具有动画的。好，我们来看课件。过度好。众所周知，CSS效率极高啊，它的执行效率是要比GS高很多的啊，OK，其变化的过程往往都是在一瞬间完成的，速度极快。C全三性提供了一种在更改CSS属性时控制动画速度的。

方法，OK，记住这个全三形是个简写属性啊，它里面有四个属性值啊，他提供了一系列的，但我们会一个个学啊，OK啊，他可以让属性变化成一个持续一段时间的过程，是不是而不是立即生效，比如将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用了CS全三型后，元素的颜色逐渐从白色变为了黑色啊，按照一定的曲线数据变换，这个过程可以自定义啊，只不过现在这个过程我们拿的是什么？默认的吧，我没有去自定义这个过程嘛，可是这个时间我们是不是已经定义了，是不是OK，可是我们来看。好，这首首先来说一下这个全三性是什么啊，OK，那这个简学属性我方的什么，最后来讲，先讲第一个干嘛，指应用过渡的属性名称，刚刚我们有个字典。

没有默认是不是干嘛？默认是哦啊，你这有吗？啊，默认是哦，什么意思，只要你哪个属性值是可以被动画的，只要你发生改变了，那我就给你产生过度，懂不懂，可是我能不能指定能干什么全三性高不不太吧是不干嘛，我让谁，我让这个外。OK，现在我是不知道这个外去产生过度，你说靠谱吗，现在。时间没有时间吧，你没有告诉浏览器什么时候去呀。完成这个过渡啊，是不是OK，看第二个什么全三星。对吧，这是用来控制这个什么间隙啊，你这个动画它它所执行的间隙啊，如果你光这么写，你来看不会有任何效果的，是不是OK，可是你说告诉他什么全三星高。

比如说给给个什么两秒，我们来看一下。走你你看是不是只有宽度有变化，你看来看一下，比如把这个过程我们放什么，放大一点，这五秒看去后又变胖了吧，走你走你走，你是不是卖卖飞小狼好，他减肥的一个过程，你看你看也就说哎你看我喝了上去的时候是不是有个动画，我后了出去的时候，你看问你现在我为什么后上去的时候可以可以产生一个动画。因为我在后的时候是不是去改了你的宽度，而且指定了你这个宽度去产生。过度动画的是不是，你看现在我和上去的时候，确实宽度给我来了一个什么动画吧，那问你，那我鼠标出去的时候宽度没有改变。改变了，要不有动画照样动画。

懂吗？就说这个东西是一次性的吗。不是，只要你这个外事在一定情况之下产生的变化，不管是你用还是用产生变化，只要我这个外它的外的属性值有了变化，而且它被过度的已经选中了，那这个过渡的时间就会应用上去。这里面你讲OK，那比如这样看，那能不能写多个呢。走，你来看嘛。是不是啊，你还慢慢变小吗？是不是啊，走你你看慢慢变大嘛，这个能不理解啊，好，可是很明显这个字体没有吧，啊，那其实默认值是什么哦，这里。刷一下你看。慢小走，你。走你玩一年，走你你是这的好，那再来看一下，那没发现如果这样写。

Vis。Catch。还有什么？是不是看这时有没有只有你。都有吧，还是一样的吧，可是他们是不是只有一个时间？是不是？那你想想，我让他们时间不一样行不行？可不可以啊，比如说第一个五秒，第二个两秒，第三个呢，好像不知道是吧，那这样我把这个换换，我让放的变成五秒外，是的我们比较好看嘛啊OK，我们让放放着变什么五秒宽度变280，看高度到底是几秒来看啊，真的眼睛看首先看放的。是不是很慢，放的是很慢，是不是来看来再看这个宽度，宽度是很快高度呢。你看再来看一遍啊，最后让你们看一遍，首先你们知道放的肯定是五秒，这样不要用放吧，我们什么用颜色是不是你们更能感觉到，那我们去干嘛改成back的行不行，把这个back方从pink改成什么。

那这个字就稍微给小一点吧，是吧，我们把这个白黄虫pink改成一个黑色吧，这样你们应该能感觉到，来看一下周年。说一下。有没有发现什么？颜色跟高度是不是同时过渡完的，你看不颜色跟这个高度是不是同时。过度完的宽度是不花了两秒来再来看这个过程啊，这个改成100。行高就对，我们就改成100万你。哦。有没有看见好，其实我们在过渡的时候，这个列表是怎么样的，现在我这个列表是不是没有办法满满足我这个，我的这个周期列表，没有办法去满足我这个属性列表，那怎么办呢？他会复制的。

CC。他的他是复制列表的，懂吗？他并不是把最后一个两秒干嘛，他并不是这样的，等等，并不是把最后一个两秒往后去延，不是这样的，他是去复制的列表。啊，他就把这个列表给复制下来，所以说这个时候其实你这个高度他的过渡时间是五秒，你们可以来关注一下，如果我不这么想，看这个高度的过度是不五秒，是不很慢，说下周你高度是不很慢。这能理讲好高度分两表啊，这个列表是重复的，这能理解吗？好，我们再来看，好那讲完这两之后，首先我们看全三性，不指定用过度属性的名称，默认只是哦表示所有可被动画的属性都表现出过度动画吧。好，这里面说了可被动画的性，那哪些属性是可被动画的呢？看看CTRLLC。

啊，不要用这个浏览器。CTRLB，好，这些上面列出来的数性，所有属性都是可以带。动画的看一下有没有ABC。D连D开头的都没有啊，记住所有D开头属性都不可以被动化啊，啊不是说他们是按刚刚我那种。逻辑来删的啊，所以在这个列表上面的所有的属性都是可以被动画的，这这能理解吗？好，这里好再来看。好，可以自己多个朋友讲，没有问题，好为那的时候是么？没有过动化或的时候，所有可被动化的属性都表现出过动化，只要你这个属性值发生了改变，OK，这个可以去解属性名称，没问题啊。

是不是给那看第二句什么全些。叫什么点行吧，是不是属性以秒或者毫秒为单位，指定过渡动画所需的时间，默认是零表现不出现或者动画吧，是不是OK，他是不是可以是毫秒的。是不是，那这样吧，我们还是来看一看吧，那这个字我就不要了好不好，这个字好像太影响你们了，来看一下周年。刷下走。OK，现在是不秒完，可能毫秒应该也可以5000毫秒啊，这个两秒我也不要了，这个时是不是当然的吗？重复这个列表吗？都是一样的嘛，都是五都干嘛，都是五秒是不是OK没问题，好走，你再来看。好，可以指定多个时长吧，每个时长会被用到由全三指定的对应的属性上吗？如果指定的时长个数小于属性个数，那么时长。

什么列表会重复？如果时长列表更长，那么该列表会被裁剪。两种情况下属性列表都保持不变，什么意思啊？如果你里面这些值干嘛？很多比我多了怎么办？我现在只有三个，直接这边给你踩掉。这里面讲这比较简单啊，OK，这里好，还有还有什么事情，就是大家看现在是不是好好的都没有任何问题啊，OK，我们来看这个属性值啊，也就什么这个全三性性这个属性值啊，它是以秒或者好毫秒为单位的一个一个数值吧，看不类型的表示过渡属性从旧的值转变新的值所需要的时间是不是，如果时长是明秒，表示不会呈现过度动画吧，动属性会瞬间完成转变，不接受负值啊，我后面是不是给它加一句啊，一定要加单位，不能写零，一定要写成零秒是不是，这好像很激烈啊，是不是，你看五零貌。

嗯。也行吗？零秒吗？一样吧，是不是？可是切记你在写全三线的时候，把这个单位全部给我带上，为什么？来看一下我是不是可以写列表的。这样写行不行，看一看。有吗？没有吗？叫一颗老鼠屎坏了一锅粥啊，本来我想想他们俩有一秒的过度的外事不让有过渡的，你发现你写个零啊，那什么过渡就没了，怎么一定要带单位走你？看见没有，看见没有啊，这个点给我注意住，文档上是没有的，可是你们得知道这么下好，这在我们日常上中经常踩的一个坑，不加单位好OK好周你那这个过渡的前两个参数咱们就说完了，一个是它的属性名称，一个是它的周期啊这个视频先听一下。