过渡
给岁月以文明,而不是给文明以岁月—出自三体,
有了时间才会产生变化.
我们玩游戏.例如英雄联盟的时候你无论是传送还是释放技能是不是也需要一个施法时间.
过渡是一种动画,可以从一种状态过渡到另一种状态.
比如按钮从常规状态变成被按下的状态,正常情况下,这种变化是瞬间完成的.
至少是游览器会尽快的完成这种状态变换.
在点击或者按下按钮的时候.游览器会重新计算页面新外观,在几毫秒之内进行重绘.
而我们在应用过渡的时候,我们要告诉游览器完成各种变换需要多长时间.
然后游览器再计算在此期间屏幕上该显示哪些过渡状态.
有时间才能产生变化.
变化分为开始状态和结束状态.
过渡需要的条件
开始状态 结束状态 过程消耗的时间
我们现在这个盒子有没有过渡时间,现在只有一个状态宽100高100背景为绿色
.box{
width: 100px;
height: 100px;
background-color:green;
}
.box{
width:300px;
/*我们来写第二种状态修改这个状态,现在开始状态有了,结束状态有了,
现在有没有过渡效果呢?这里好像样式从100到300的时候没有变化时间,我们去修改变化时 间*/
}
<div class="box"></div>
.box{
transition:1s;
}
/*这时候还没看到过渡效果,为什么.因为这时候我们没有状态改变的指令和触发条件.
我们先写一个样式再写一个样式是不会发生样式改变,这里直接会根据我们样式优先级去进行覆盖.
这里我们要去写一个hover伪类*/
.box:hover{
width:300px;
}
/*初始状态宽100高100背景颜色为红色.
当我鼠标放上去时候花了一秒种的时间由宽度100变到了宽度300,这就是过渡效果*/
过渡
描述状态发生改变过程中具有的特性,
比如上面盒子宽度状态由100变到了300,
其实就像变形金刚一样,就算从汽车变成人形,发生了形态上的变化,它也是需要一个时间.
这个变化的时间就是我们状态发生改变的过程,这个才能说成是我们状态发生改变的特性.
我们今天晚上就是学习变化过程中有哪些东西可以去进行控制
我们之前的写transition和background类似,都是复合属性
过渡时间: tansition-duration
.box{transition-duration: 1s;}
/*我们重新去写下,这个盒子依旧能够展开,我们还可以去修改时间*/
时间单位
默认是0s
单位:s(秒) ms(毫秒) 1s = 1000ms
.box {transition-duration: 300ms=0.3s}
/*这个和写秒是一样的,我们这里的毫秒满1000去进行进一*/
我们这里可以去写0s吗?
.box{transition-duration:0s;}
/*当然也是这样的,这里0s就是相当于我们鼠标放上去过渡就立马结束了.*/
这里面可以去写负数吗?
.box{transition-duration:-1s;}
/*我们去写负数是没有意义的*/
我现在想问问,我们的过渡时间写在了哪里?
我们把transition-duration写在了一个原始的盒子里边.
因为我们要赋予这个盒子的过渡时间,也就是这块盒子具有了属性样式发生改变的所所要表现的效果.
如果我不写在原始元素上可能会发生问题,所以我们通常是写在原始元素上面.
不会写在伪类上面的,那我们写在伪类上会发生什么效果
.box:hover{width:300px; transition-duration: 1s;}
/*这个盒子有没有过渡效果?有.那么写在hover上好像也是有.
那我们来看看写在原始元素上和hover有什么区别?
这时的区别是鼠标移入的时候缓慢张开,鼠标移开的时候瞬间退回来*/
.我们对比来观察一下写在原始元素上面
.box{transition-duration: 1s;}
/*可以看到无论是开始还是结束,元素都具有过渡时间.
而写在hover上只有当我们鼠标移入元素才有过渡时间,移出元素就没有了*/
写在伪类上(开始有,结束没有)
.box:hover{ width:300px; transition-duration: 1s;}
/*现在原始元素有几条样式,哪三条,现在是只有我们宽度高度背景.
当我们鼠标放到元素盒子的一瞬间,盒子有几条样式,是四条.
我们宽度100px就没有效果了,被我们移上去的时候覆盖成了宽度300px.
所以说我们现在移入时有宽度,高度,背景颜色和过渡时间.
当我们写在伪类的时候一开始时宽度100px,后面我们设置移入属性的时候发现宽度要张开,张开到300px.
然后他又发现身上还有transition-duration:1s,张开时要遵循这条样式花一秒钟的时间去张开.
当我现在把鼠标从这个盒子上拿开有几条?说明我移入样式消失了,此时只有原来元素盒子里面的三条样式.
所以说鼠标离开的只有三条样式,接受到一条指令宽度要变为100px,
这时候回来的时候盒子已经没有过渡时间这个样式,所以他瞬间会变回来.
当触发Hover移入样式的时候里面的元素才会生效.
*/
过渡时间写在不同的位置 效果不一样
1.开始没有 结束没有
什么都不写,默认就是这样,没有过渡时间
**2.开始有 结束有 **
原始元素上
.box{transition-duration: 1s;}
**3.开始没有 结束有 **
元素上1s hover:0s
鼠标移入的时候瞬间展开也就是说在我们的Hover效果当中肯定是没有过渡时间.不然移入肯定是会接收到过渡时间
移开的时候相当于Hover失效,这样回到原始元素本身肯定有过渡时间了.我们的元素才能慢慢的过渡回原来的效果,
.box{transition: 1s;}
/*现在移入移出都有过渡属性*/
.box:hover{ transition-duration : 0s;}
/*我们只需用户在放上去的一瞬间下面的样式把上面的覆盖,我们只需写成0;*/
4.开始有 结束没有
:hover:1s
我们就只需给予移入时候过渡时间,移出回到原始元素的时候没有过渡时间就行了.
接下来我们来聊聊过渡开始和结束的问题
.box{
width: 300px;
height: 300px;
background-color:green;
}
/*我们现在想实现当我们鼠标放在上面向右移动100px,怎么实现?*/
.box{
position: relative;
transition-duration:1s;
}
.box:hover{ left: 100px; }/*这块盒子没有出现过渡效果*/
过渡是怎么产生的?
假如我现在站在起始点0m的位置我要跑到100m的位置,匀速奔跑我花了10s,
如果电脑知道了.它是不是就能知道我在0s到10s这个时间段任何一个时刻t我所在的位置
公式(100-0)/10*t当前所在的位置,这里不讨论变速的情况,此时游览器也得经历这个过程,
必须要知道我们的过渡时间,开始是0px结束是100px所花得时间是1s,
换句话说就是游览器能知道这1s内我们元素的任何位置.但现在游览器不干了.
这里初始位置我们都知道left为0px,结束为100ox,过渡时间为1s.
虽然我们知道,但是游览器不知道.
所以我们写过渡效果必须明确写出变化开始,结束,时间,缺一不可.
.box{
position: relative;
left:0;
transition-duration:1s;
}
.box:hover{ left: 100px; }
过渡效果的延时(transition-delay)
表示这个变化效果要延后多少秒进行过渡
默认是0s
等用户鼠标放稳后再移动
.box{transition-delay: 1s;}
/*开始的时候有延迟,结束的时候也有延迟,默认是0s*/
这里却可以为负数
.box{transition-delay: -0.5s;}
/*表示这个盒子执行一个动画,假如这个元素由0的位置变到100,花了1s.
但是我鼠标放上去的一瞬间相当于延时为负数,提前0.5s动.
大家可能会觉得我鼠标放上去前0.5s它动了,但是只有当我们放上去才能看到效果.
是鼠标放上去的一瞬间他已经运动了0.5s,*/
.box{
transition-duration: 3s;
transition-delay: -1s;
}
.box:hover{ width: 600px; }
/*说明我们整体的运动有一秒钟我们看不到了,因为他已经提高走过去了*/
这个负数表示 整体运动时间 = duration + delay
假如我们的过渡时间是两秒钟,延迟是两秒,整体是要花四秒钟的,先等两秒,运动2秒;
假如延迟delay是负数-5s的话,我们运动时间是10s,虽然不会时光穿越.却可以让它提前5s跑,所以我们只能看到剩下的5秒.那么过渡一开始就会跳到一半的位置.
但是我运动是2秒,延时是-3秒,延时加运动时间为负数.
就相当于它已经在终点站了一秒钟了.整体运动时间就为0秒,不产生时间的过渡.不可能为负数的.
过渡的属性 transition-property:
我们控制盒子过渡的时候,不想让所有的东西都进行过渡,
比如我里面写了过渡的高度和宽度和背景颜色,但这是我只想让它宽度和背景颜色产生过渡效果,怎么办?
这就需要我们的transition-property;规定过渡作用于元素哪条样式上面
1.all 对所有可能的样式都生效 默认
2.none 没有过渡属性
多个值用逗号隔开
.box{
width: 100px;
height: 100px;
background-color:green;
transition-duration: 3s;
transition-property: width,background-color;
}
.box:hover{
width: 500px;
height:500px;
background-color: blue;
}
我们还可以让一张图片过渡到另一张图片
.box{
width: 500px;
height: 500px;
background:url(1.jpg) center/cover;
transition-duration: 3s;
}
.box:hover{
background:url(1.jfif) center/cover;
}
过渡的速率(transition-timing-function)
其实我们每个人跑步可能都不一样.
曹刿(guì)论战不知道大家读过没有?
跑步有的人是一鼓作气再而衰,三而竭 一开始比较猛,后面就痿了.
有的人属于稳步加速,越跑越快.
有的又是后热型的.以为是个青铜没想到是个王者.
所以我们的变化速率就是描述什么时候变化比较快,什么时候变化比较慢.
接下来我们来研究研究跑法.
.list{
width: 900px;
border:1px solid black;
}
.list li{
position: relative;
left: 0;
width: 100px;
height: 100px;
margin:10px 0;
background-color: red;
transition-duration: 2s;
}
.list:hover li{
left:800px;
}
.list li:nth-child(1){
transition-timing-function: ease;/*默认值,开始和结束慢速,中间加速.*/
}
<ul class="list">
<li>ease</li>
<li>linear</li>
<li>ease-in</li>
<li>ease-in-out</li>
<li>linear</li>
</ul>
.list li:nth-child(2){
transition-timing-function: ease-in;/*开始慢速，后面快.*/
}
.list li:nth-child(3){
transition-timing-function: ease-out; /*开始快,后来慢.*/
}
.list li:nth-child(4){
transition-timing-function: ease-in-out; /*两头慢,中间快.*/
}
.list li:nth-child(5){
transition-timing-function:linear;/*匀速*/
}
给大家介绍一个非常厉害的东西叫做**贝塞尔曲线,**打开百度.做出任何想要的运动方式
今后做运动曲线,做贝塞尔曲线,想怎么调就怎么调https://cubic-bezier.com/
水平方向为运动时间,竖直的线为随着时间推移运动的距离或者叫进度.
特殊值 贝塞尔曲线 cubic-bezier
越陡速度越快 越平缓速度越慢
cubic-bezier(x1,y1,x2,y2)
1.x1 x2取值范围是0-1
2.y1 y2 可以任意取值
总结过渡:复合型写法
过渡属性property 过渡时间duration 过渡曲线 time-function 过渡延时delay
只有时长不可以省略 其他都可以省略
transition: width 1s linear 2s;/*宽度效果 运动1s 匀速 延时2s开始 严格遵守顺序*/
动画
动画和过渡的区别
过渡:描述样式开始和结束状态的变化过程 需要手动触发
需要触发条件(伪类) ,只有开始和结束两个状态,需要整体的过渡时间
动画:动画不会有触发条件,自己运动,而且动画有多个状态,甚至可以无限循环.
动画是什么?
一张张画面拼接成的运动的效果
利用原理
物体在快速运动时, 当人眼所看到的影像消失后，人眼仍能继续保留其影像0.1-0.4秒左右的图像，这种现象被称为视觉暂留现象。
动画片 每一副画面叫做一副动画帧
我们要在游览器里做动画,会不会很累我们要去播放一个五秒钟的动画.
我们按照屏幕刷新率每秒60来说,每秒要画60张图片,5s就是300张画面样式.
而且每一个画面包含不同的信息.那我们做动画会特别特别的累,看上去我们需要去做那么多帧.
但是有的画面是没有必要描述出来的.
我们有时候只需要用户需要定义第一帧和最后一帧，中间的帧数由计算机辅助生成
关键帧 描述画面关键位置值的集合
假如我们这一个盒子一开始在左上角.
我想要让盒子移动到右边,
我们使用用定位只需设置这块盒子left为300px,top为0px.这就是一个关键帧.
右下角left:300px,top:300px这又是一个关键帧.
左下角的关键帧left:0px;top:300px;
原始位置左上角的位置top:0px;left:0px;
如果在页面上制作动画,就不得不说说css3和flash;
我们css3animation制作动画现在已经完全取代了flash制作方式.
以前flash作为前端发展史很重要的角色现在已经被淘汰了,现在虽然可能还有一些小游戏在做,但已然是没救了.
因为早期我们要去游览器里玩游戏看视频,去进行一些比较复杂的操作.
那个时候由于页面元素盒子的一些限制无法去制作这么复杂的效果.
那时候macromedia公司发明了风靡了一段时间flash.
但是flash是一个独立插件需要去下载,安全问题,开发也不方便,性能也特别糟糕.
但是现在大家所学的就是h5和css3.
h5的video彻底取代了flash的视频放.
h5的canvas彻底取代了flash的游戏.
css3的animation取代了动画.
那我们今晚去学习css3的aniamtion,它开发简单,效果优秀,很容易上手,性能也很优秀.
.box{
position: relative;
left:0;
top:0;
width: 100px;
height: 100px;
background-color:red;
}
<div class="box"></div>
现在想让盒子向右走300px 向下走300px 向左走300px,往上走300px;
animation: roll 4s;
/*现在我们规定了一个动画为什么没有旋转起来,这个动画怎么运动的游览器不知道.
我们并没有将这个动画的运动过程去描述出来,所以我们要去描述定义它的关键帧
关键帧怎么去定义,@keyframes.*/
@keyframes roll{}
/*这时候定义了关键帧,然后我们定义动画的名称叫做roll.
然后我们要去使用这个动画,我们这个动画运动4s的时间.
第一秒运动到右边,第二秒下边,第三秒左边,第四秒上边.
我们首先是不是先让这个盒子从左边到右边*/
动画:
1.时间
2.动画过程中的描述
@keyframes roll{
from{
left:0;
}
to{
left:300px;
}
/*我们这里去定义了一个关键帧,这个关键帧的名字roll.
这个位置从left为0px开始到left为300px结束.
这里面from就是起始位置的关键帧,to就是结束位置的关键帧.
这里我们也可以只写to表示从本来位置出发到达目的地.*/
看到了这个效果,问题来了,这个效果貌似和我们刚刚写的过渡效果很相似.有什么样的区别,
最大的区别是我们刷新了页面它就运动了,并不用我们去主动的点击.
我的鼠标没有对它进行任何操作.
而是它自动运动的,自动运动的不就是动画吗?
现在我们已经无法通过鼠标去操纵这个盒子了.
现在假如说我需要去设置三个关键帧,from和to就不够用了.
所以我们在关键帧当中用百分比去描述动画的进程
@keyframes roll{
0%{
left:0;
}
100%{
left:300px;/*一开始是运动位置0%,结束位置是100%,效果和上面是一致的*/
}
}
现在我们想让它的运动到2s时跑到右边去,运动到100%跑到下边
@keyframes roll{
0%{
top:0;
left:0;
}
50%{
top: 0;
left:300px;
}
100%{
top: 300px;
left:300px;
/*看看这个动画有几个关键帧,3个关键帧,这个动画有几段,2段动画.
关键帧和动画的关系是什么,三个关键帧就代表两段动画*/
}
}
所以得出结论
N个关键帧有N-1段动画
**所以假如现在5个关键帧这五个关键帧均分 **
分别是百分比的多少 0% 25% 50% 75% 100% 有四段动画
@keyframes roll{
0%{
left: 0;
top:0;
}
25%{
left: 300px;
top:0;
}
50%{
left:300px;
top: 300px;
}
75%{
left:0;
top:300px;
}
100%{
top: 0px;
left:0px;
}
/*这里我们要清晰的写出每个关键节点的位置,不然游览器会提前动*/
}
我们关键帧数量肯定是越多越好,越多动画控制越精细,但是我们人开发是有极限的
animation动画也是个复合样式
animation-name:动画名称(自己定义的关键帧)
animation-duration动画时长(s/ms)
animation-timing-function动画速率
animation-name: roll;
animation-duration: 4s;
animation-timing-function: linear;
/*这个time-function 动画速率 这个不是整体的运动速率.
而是每一段动画的运动速率.
如果要写控制不同段动画的运动速率写在不同的关键帧里就行了*/
animation-timing-function: steps(1);/*表现这个动画只有一段*/
animation-timing-function: steps(2);/*这一大段动画被分成了两段去闪现*/
动画运动次数(animation-iteration-count)
默认运动1次.
可以写数值表示运动几次.
运动完成之后默认回到初始位置,
但是无限运动次数infinite就不会回到初始位置
贪吃蛇
animation-duration: 5s;
animation-timing-function: steps(10);
animation-iteration-count:infinite;
/*总运动长度为1000px,如果设置的盒子的宽度为100px;总共要分为10段就可以了*/
@keyframes roll{
from{
left: 0;
}
to{
left: 1000px
}
}
小姐姐找一个500px宽高的图片
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>/*五个盒子 图片的宽高是500px 被这五个盒子均分*/
.box{
position: relative;
left: 0;
top:0;
width: 100px;
height: 100px;/*宽高设置100px*/
animation-name: roll;
animation-duration: 2s;
animation-timing-function: steps(10) /*linear也行*/;
animation-iteration-count:infinite;
background-image: url(");
}
.box:nth-child(1){
background-position-y: 0px;
animation-delay: .3s;
}
.box:nth-child(2){
background-position-y: -100px;
animation-delay: .6s;
}
.box:nth-child(3){
background-position-y: -200px;
animation-delay: .9s;
}
.box:nth-child(4){
background-position-y: -300px;
animation-delay: 1.2s;
}
.box:nth-child(5){
background-position-y: -400px;
animation-delay: 1.5s;
}
@keyframes roll{
from{
left: 0;
background-position-x: 0;
}
to{
left: 1000px;
background-position-x: -500px;
}
}
多帧动画
<div class="box"></div>
.box{
width: 184px;/*图片的宽度=总宽度除以几段*/
height: 325px;
animation-name: roll;
animation-duration: 1s;
background-image: url(0.jpg);
background-repeat: no-repeat;
animation-timing-function: steps(8);
animation-iteration-count:infinite;
}
@keyframes roll{
from{
background-position: 0 0;
}
to{
background-position: -1472px 0;/*图片的负总宽度*/
}
}
一个盒子多种不同的动画效果,如何实现?
<div class="bigbox">
<div class="box"></div>
</div>
.box{
width: 184px;/*图片的宽度=总宽度除以几段*/
height: 325px;
animation-name: roll;
animation-duration: 1s;
background-image: url(0.jpg);
background-repeat: no-repeat;
animation-timing-function: steps(8);
animation-iteration-count:infinite;
}
.bigbox{
position: relative;
left: 0;
animation-name:move;
animation-duration: 2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes move{
from{
left: 0;
}
to{
left: 1000px;/*此时我们让这个动画行走在这个盒子里了*/
}
}
如果一个盒子搞不定,再套上一层盒子就可以了或者用逗号分隔实现多段动画效果
和背景非常相似,用逗号分隔实现多段动画效果.,
有一个大方盒子,里面有一个小方块,小方块随机运动,碰到边界随机反弹
<div class="wall">
<div class="ball"></div>
</div>
.wall {
width: 600px;
height: 600px;
border: 1px solid black;
}
.ball {
position: relative;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
animation:movex 2s linear infinite,
movey 3s linear infinite,
color 1.5s linear infinite;
}
@keyframes movex {
0% {
left: 0;
}
50% {
left: 500px;
}
100% {
left: 0;
}
}
@keyframes movey {
0% {
top: 0;
}
50% {
top: 500px;
}
100% {
top: 0;
}
}
@keyframes color {
0% {
background-color: red;
}
50% {
background-color: skyblue;
}
100% {
background-color: purple;
}
}
动画结束时候的状态(animation-fill-mode)
backwards 默认为回到初始位置
forwards:执行动画完成后保留最后状态
.box{
position: relative;
left: 0;
width: 100px;
height: 100px;
background-color: red;
animation-name: move;
animation-duration: 3s;
animation-fill-mode:forwards;/*停留在运动结束(最后一帧的)的位置*/
}
@keyframes move{
to{
left: 300px;
}
}
<div class="box"></div>
延迟时间(animation-delay)
animation-delay: -2s;/*表示提前了两秒的运动 和动画持续时间加起来就行了,*/
animation-iteration-count:infinite;
/*假如我让动画无限次的运动,盒子会不会回到初始位置呢?
会回去!说明延时生效,注意animation-delay只是延迟整个动画效果的开始.
相当于你看电影,晚了两分钟没看到开头,那你一直不走等到下场开始了你不就能看到全部了.*/
动画的运动方向animation-direction
规定动画在下一次是否逆向播放 动画如果进行到100%该怎么回到0%
animation-direction: 放置元素运动的时候出现不连贯的情况
normal(0~100): 瞬间切回去,每一次都是正向播放.
reverse(100~0); 从100%的位置到0%的位置
alternate(01000) 从0%出发来回播放,大于等于2能看到效果.
alternate-reverse(1000100) 从100%出发来回播放,大于等于2能看到效果
animation-iteration-count:infinite;
animation-direction: alternate;
animation-iteration-count:2;
动画的暂停(animation-play-state:paused;)
默认running是默认值.
可配合状态类伪类选择器操纵元素的动画状态
.box:hover{
animation-play-state:paused;
}
复合写法
animation: name(名称) duration(时间) timing-function(速率) delay(延迟) iteration-count(次数) direction(执行方向) fill-mode paly-state动画的暂停;
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
