详解CSS动画属性关键帧keyframes全解析

发布时间: 2019-03-16 00:49:08 来源: 互联网 栏目: CSS 点击:

这篇文章重要简介了详解CSS动画属性关键帧keyframes全解析的相干材料,小编认为挺不错的,如今分享给大年夜家,也给大年夜家做个参考。一路跟随小编过去看看吧

大年夜概有多久没有更新专栏文章了。半年?下半年忙到起飞,或许绝不夸大的说是发射?唯一的一点小我时间,上半年供献给了Python,如今差不多已忘掉落了七七八八(一首《凉凉》送给本身),下半年供献给了JavaScript,终究鼓起勇气体系的开端进修JS了(换台,梁静茹《勇气》走起)。本来想一向等等等,比及webapi学完后放个大年夜招,svg+CSS动画搭乘上JavaScript的确如虎添翼势不可当。然则,看掘金作者群里评论辩论的风生水起,忽然感到本身全然是陌生人(此处应放蔡健雅?),所以,更一篇文章刷一下存在感。

这篇文章本来是写的《SVG+CSS动画》小册中的一个末节选,小册由于各类莫名的缘由,搁浅了,搁浅……起航时间遥遥无期,但keyframes关键帧作为控制动画在不应时间的状况的重要元素,决定了七十二变的终究形状,所以此次更新专栏拿它下手。至于小册嘛,假设能发的话,外面再换成其他的案例就好,此为后话。

关键帧keyframes的基本概念此处可省略,下面才是满满的干货。

案例:一路向前永一向歇的圆

由于只是来解释关键帧,所以只弄了一个简略单纯的仅程度位移的动效。是以,这篇文章得以离开SVG伶仃存在仅和CSS3动画属性相干。

这是一个尽力从终点滚向终点的圆圈,全部路程为800px,但我在它的必经之路的三处设置了三个驿站。如今就要经过过程关键帧的定义让圆圈内行进的路出息入驿站并稍作逗留。

1.先来一个最基本的

CSS部分定义一个最基本的位移动画,4s完成,线性速度case-关键帧演示1-基本 。

@keyframes  move{
0%{transform:translateX(0)}
100%{transform:translateX(800px)}
}
.c_move{animation:move 4s linear both} /*both:活动停止后逗留在终点*/

这个发挥感化主如果在定义了无穷轮回动画时。

基本的设置天然带来毫无特点平铺直叙的基本动效。

2.延迟开端

下面,我想让圆圈在终点逗留2s后再开端移动,第一反响是用动画属性中的延迟 animation-delay ,把时间定义成2s,行不可?行,但这里用个更高等的办法。我们在定义关键帧时用了大年夜量的百分比,这里百分比值代表的是 时间节点 ,也就是说 关键帧定义的是不应时间节点的状况属性。 下面再来看一张图,这张图必定不要和下面的途径演示弄混了,这是一张动画的时间轴的图。

让圆圈在终点逗留2s那是表象说法,转化成我们的动画定义说话,就是在4s动画周期内前2s是没有动画后果的。所以,动画规矩我来如许定义:

@keyframes  move{
0%{transform:translateX(0)}
50%{transform:translateX(0px)}
100%{transform:translateX(800px)}
}

对比下面时间轴的瓜分来看,更轻易懂得一些,如许就取得了在终点处逗留2s后,在前面的2s完玉成部动画的动效。这里亦或用一种更简单的写法为 0%, 50%{transform:translateX(0)} ,属性雷同的可以归并在一路,用逗号分隔。 case-关键帧演示-延迟开端

 

3.提早停止

有了延迟开真个基本,提早停止是否是曾经可以类推出来了。为了辨别一下,我让动画提早3s停止。按例先画出时间轴的解析。

对应关键帧的定义以下:

@keyframes  move{
0%{transform:translateX(0)}
25%,100%{transform:translateX(800px)}
}

终究成果圆圈必定是4倍速度尽心尽力加快完成路程(毕竟要把本来4s的时间紧缩到1s完成),然后怡然自得的在终点等待全部动画时间停止。 case-关键帧演示-提早停止

 

4.中途逗留

那些已预备妥当的驿站,如今可以发挥感化了,我欲望圆圈如许活动:全部路程中仅在第一个驿站(移动200px后)逗留1s,稍作整顿。映照到时间轴上是甚么模样的呢?

这里,出现了一些看上去很奇怪的数字,须要解释一下。先来明白一点,我们分析时间轴,终究要取得是时间节点。针对我们的设计,逗留1s,那活动的时间就是3s,而这3s的时间是分红两部分的,第一部分是前200px,第二部分是后600px,由因而线性匀速,所以当时间轴分红A+B+C三部分后,在A时间段跑完200px,在C时间段跑完600px,计算出A对应的时间0.75s,C对应的时间2.25s,B的时间是逗留的时间1s,再换算成对应的百分比,这就是终究中心两个时间节点的计算办法。时间轴解析完成后,CSS部分的定义轻而易举:

@keyframes  move{
0%{transform:translateX(0)}
18.75%, 43.75%{transform:translateX(200px)} /*对应逗留的1s*/
100%{transform:translateX(800px)}
}

case-关键帧演示-第一个驿站逗留1s

 

5.像虫洞一样腾跃式进步

增长些难度,在中途随便任性点作逗留曾经不是甚么成绩了,逗留在一个点和多个点是雷同的思路,如今,我让圆圈腾跃式进步,进入第一个驿站后,逗留1s,跨过第二个驿站,直接进入第三个驿站,逗留1s,完成路程。根据空间折叠道理,200和600处产生了跃迁。分析时间轴:

重点看白色的部分,那边就是跃迁的时间点,在无时间变更的情况下位移了200px。按照时间轴的分析,CSS部分实际上是如许的:

@keyframes  move{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)}
100%{transform:translateX(800px)}
}

后果若何呢?

完全和想象的不一样,成绩出在哪里呢?就是时间的50%节点处,浏览器可不知道你真实的想法主意,它只会认为你定义错了,当有两个雷同的50%的关键帧的不合属性值定义时,会主动忽视第一个,而以最后一个有效值为准,所以下面的定义相当于给浏览器传达的讯息是如许的:

@keyframes  move{
0%{transform:translateX(0)}
25%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)} /*在位移600px后逗留1s*/
100%{transform:translateX(800px)}
}

这就是为甚么看上去是达到第一驿站后加快跑向第三个驿站,然后逗留后再完成剩下的路程的缘由。如今游戏愈来愈成心思了,或许我们可以尝尝 骗过浏览器 。既然异样的时间点只许可定义一个属性值,那假设我在紧邻的旁边增长一个时间点来定义,会产生甚么?

@keyframes  move{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50.0001%,75%{transform:translateX(600px)} 
100%{transform:translateX(800px)}
}

看下面出现的**50.0001%**这个时间点,猜猜产生了甚么?这就是下面所谓的“骗过浏览器”的办法了。在50%→50.0001%这个区间,产生了400px(200→600)的位移变更。所以就取得了下面这类后果:case-关键帧演示-跃迁

从道理下去讲,这是一种视觉欺骗,在极短的时间内涵两个地位间产生位移,由于时间短到可以忽视,所以会有一种腾跃的假象。

总结

看完下面的几种代表性实例,是否是对关键帧的定义有了一个全新的熟悉,你能够会认为关于“延迟开端”和“提早停止”这两种需求,是完全可以经过过程定义延迟时间和动画周期的时间来达到雷同的后果的,然则,关于一个无穷轮回的动效而言,延迟开端永久只感化一次,当动画一旦开端进入循环往复的轮回后,不再支撑这个属性设置。是以,假设可以的话,尽可能用关键帧的定义来完成。

以上就是本文的全部内容,欲望对大年夜家的进修有所赞助,也欲望大年夜家多多支撑我们。

本文标题: 详解CSS动画属性关键帧keyframes全解析
本文地址: http://yourctp.com/web/css/208989.html

假设认为本文对您有所赞助请赞助本站

付出宝扫一扫赞助微信扫一扫赞助

  • 付出宝扫一扫赞助
  • 微信扫一扫赞助
  • 付出宝先领红包再赞助
    声明:凡注明"本站原创"的一切文字图片等材料,版权均属编程客栈一切,迎接转载,但务请注明出处。
    详解八种办法完成CSS页面底部固定前往列表
    Top