阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

前端深入之css篇丨2020年前,彻底掌握css动画【animation】

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1021/121017.html 写在前面马上就2020年了,不知道小伙伴们今年学习了css3动画了吗?说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量、提高性能上一篇文章我们已经一起学习了transition 的使用,如果有不了解的同学可以查看我的上一篇文章话不多说,马上和我一起去学习今天的主角animation吧!animation 语法值描述@keyframes定义一个动画,@keyframes定义的动画名称用来被animation-name所使用animation-name检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义animation-duration检索或设置对象动画的持续时间animation-timing-function检索或设置对象动画的过渡类型animation-delay检索或设置对象动画的延迟时间animation-iteration-count检索或设置对象动画的循环次数animation-direction检索或设置对象动画在循环中是否反向运动animation-play-state检索或设置对象动画的状态animation翻译成中文是动画的意思,熟练运用之后你可以用它来做各种各样炫酷的动画@keyframes:定义一个动画,定义的动画名称用来被animation-name所使用div{ width:50px; height:50px; background:#f40; border-radius:50%; animation:mymove 2s;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}@keyframes主要是做关键帧动画的,每个@keyframes后面都要跟一个名字,事例中使用了mymove作为帧动画的名字,然后可以在样式内对关键帧添加样式,然后根据关键帧 @keyframes就能自动形成流畅的动画了animation-name:检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义div{ width:50px; height:50px; background:#f40; border-radius:50%; animation-name:mymove; animation-duration:2s;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}在animation-name使用之前,我们已经定义了一个名为mymove的帧动画,这里把帧动画的名字作为了animation-name的值,含义是当前元素将执行所设置的帧动画animation-duration:检索或设置对象动画的持续时间继续看上一个案例,仅仅有帧动画和需要执行的动画名称是不足以形成动画的,我们还需要设置一个动画执行所需要的时间,这里就用到了animation-duration属性,所以上一案例所展示的时间为两秒钟执行一次animation-timing-function:检索或设置对象动画的过渡类型div{ width:100px; height:50px; background:#f40; position:relative; animation-name:mymove; animation-duration:3s; animation-timing-function:ease-in-out;}@keyframes mymove{ 0% {left:0px;} 100% {left:300px;}}animation-timing-function的作用就是改变动画在每一帧的快慢这里transition-timing-function仅展示值为ease-in-out的动画效果,可以理解为慢-快-慢其他的不做展示,可以参考下表进行理解值描述linear动画从头到尾的速度是相同的ease默认动画以低速开始,然后加快,在结束前变慢ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值可能的值是从 0 到 1 的数值animation-delay:检索或设置对象动画的延迟时间div{ width:50px; height:50px; background:#f40; border-radius:50%; animation-name:mymove; animation-duration:2s; animation-delay:2s;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}这里animation-delay的值为2s,意思是动画将在延迟两秒秒后延迟执行animation-iteration-count:检索或设置对象动画的循环次数div{ width:50px; height:50px; background:#f40; border-radius:50%; animation-name:mymove; animation-duration:2s; animation-iteration-count:infinite;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}这里animation-iteration-count的值为infinite,意思是动画将会无限次的执行,这也就达到了循环的效果,当然你还可以给它具体的数值,当执行你设置的次数后它会自动停止animation-direction:检索或设置对象动画在循环中是否反向运动div{ width:100px; height:50px; background:#f40; position:relative; animation-name:mymove; animation-duration:2s; animation-iteration-count:infinite; animation-direction:alternate;}@keyframes mymove{ 0% {left:0px;} 100% {left:300px;}}这里animation-direction的值为alternate,代表动画将会来回的反复执行,他还有其它属性,在下表给出供小伙伴们自己尝试值描述normal默认值动画按正常播放reverse动画反向播放alternate动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放alternate-reverse动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放initial设置该属性为它的默认值inherit从父元素继承该属性animation-play-state:检索或设置对象动画的状态<style>div{ width:50px; height:50px; background:#f40; border-radius:50%; animation-name:mymove; animation-duration:2s; animation-iteration-count:infinite;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}</style><body> <button onclick="pause()">暂停</button> <button onclick="run()">恢复</button> <div></div></body>function pause(){ document.querySelector('div').style.animationPlayState="paused"}function run(){ document.querySelector('div').style.animationPlayState="running"}animation-play-state的默认值为running,就是动画执行的意思,在实际应用中我们经常使用js来操作这个属性,从而控制动画的播放和暂停今天我们一共学习了八个属性值,他们都是属于animation属性的,这里给出属性值在animation中的简写方式animation: name duration timing-function delay iteration-count direction play-state;div{ animation:mymove 2s ease-in-out 3s infinite alternate running;}那么这里的意思就是mymove动画将在三秒钟后开始,以两秒一个循环慢-快-慢方式,进行动画的展示,并且每次动画过后都会向相反方向执行动画结论经过以上的学习,相信你已经初步了解了animation的用法,随着你对animation的深入理解,是可以做一些有创造性的动画的,你可以看看自己之前用js写的各种动画,尝试着用我们两篇文章所学的内容进行修改,相信你一定会对这两个属性有更深的理解但是现在我们只是学会了过渡和动画,我们现在还不能对图形进行一系列的不规则操作,而transform(变形)就是来操作改变成特殊图形的,我将在接下来的文章继续为你讲解translate(移动)以及transform(变形),跟进我的脚步吧,跟我一起在2020年前掌握css动画!结语以上就是本文章的全部内容了,如果有不正确的地方欢迎指正感谢您的阅读,如果感觉有用不妨点赞/转发前端深入系列是一个踩坑系列,是由我本人对工作和学习中所遇到的问题和踩过的坑的一个探索与总结,在此记录分享出去,同时也是对自我技能的一个反思和追问前端路漫,踩坑不断前端深入系列持续更新中……以上2019-10-21

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!