AG真人官方
Mou Mou Jidian Generator
发电机维修 发电机回收
发电机出售 发电机租赁
客户统一服务热线

0595-43031111
12846181595

4进口发电机组
您的位置: 主页 > 产品中心 > 进口发电机组 >
web前端入门到实战:彻底掌握css动画「transition」

web前端入门到实战:彻底掌握css动画「transition」

本文摘要:马上就2020年了,不知道小同伴们今年学习了css3动画了吗?说起来css动画是一个很尬的事,一方面因为公司用css动画比力少,另一方面大部门开发者习惯了用JavaScript来做动画,所以就导致了许多法式员比力排挤来学习css动画(至少我是),可是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以淘汰代码量、提高性能。

AG真人官方

马上就2020年了,不知道小同伴们今年学习了css3动画了吗?说起来css动画是一个很尬的事,一方面因为公司用css动画比力少,另一方面大部门开发者习惯了用JavaScript来做动画,所以就导致了许多法式员比力排挤来学习css动画(至少我是),可是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以淘汰代码量、提高性能。话不多说,马上和我一起去学习今天的主角transition吧!transition 语法值形貌transition-durationtransition效果需要指定几多秒或毫秒才气完成transition-property指定CSS属性的name,transition效果transition-timing-function指定transition效果的转速曲线transition-delay界说transition效果开始的时候transition翻译成中文是过渡的意思,顾名思义,它就是专门做过渡动画的,好比一些放大缩小,隐藏显示等,下面我们一起来学习一下他的语法。transition-duration:transition效果需要指定几多秒或毫秒才气完成div{ width:100px; height:100px; border-radius: 50%; background:#f40; transition-duration:1s;}div:hover{ height:150px; width:150px;}这是transition最基本的用法,transition-duration为动画执行所需的时间,这段代码的意思就是鼠标移入,div的宽高就会都酿成150pxtransition-property:指定CSS属性的name,transition效果div{ width:100px; height:100px; border-radius: 50%; background:#f40; transition-duration:1s; transition-property:width;}div:hover{ height:150px; width:150px;}这里transition-property值仅为width,意思是只给width加动画,所以会出现这种效果,同样如果换成了height,那么将会是变高才有动画。我们发现,第一个案例我们并没有写transition-property,可是案例中width和height属性是同时变化的,那是因为transition-property的默认值为all,只要不写这个属性,那就是全部变化都市执行动画。

transition-timing-function:指定transition效果的转速曲线div{ width:100px; height:50px; background:#f40; transition-duration:2s; transition-timing-function:ease-in-out;}div:hover{ width:250px;}transition-timing-function的作用就是改变更画在每一帧的快慢。这里transition-timing-function仅展示值为ease-in-out的动画效果,可以明白为慢-快-慢。其他的不做展示,可以参考下表举行明白。

值形貌速度linear(默认属性)划定以相同速度开始至竣事的过渡效果(即是 cubic-bezier(0,0,1,1))。匀速ease划定慢速开始,然后变快,然后慢速竣事的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。快-慢-慢ease-in划定以慢速开始的过渡效果(即是 cubic-bezier(0.42,0,1,1))。

AG真人官方

快-快ease-out划定以慢速竣事的过渡效果(即是 cubic-bezier(0,0,0.58,1))。慢-慢ease-in-out划定以慢速开始和竣事的过渡效果(即是 cubic-bezier(0.42,0,0.58,1))。

慢-快-慢cubic-bezier(n,n,n,n)在 cubic-bezier 函数中界说自己的值。可能的值是 0 至 1 之间的数值。

自界说transition-delay:界说transition效果开始的时候div{ width:100px; height:100px; border-radius: 50%; background:#f40; transition-duration:1s; transition-delay:1s;}div:hover{ height:150px; width:150px;}这里transition-delay的值为1s,意思是动画将在延迟一秒后执行。今天我们一共学习了四个属性值,他们都是属于transition属性的,这里给出属性值在transition中的简写方式。transition: property duration timing-function delay;div{ transition:all 1s ease-in-out 2s;}那么这里的意思就是所有属性都加入连续一秒,缓进缓出的动画,并在两秒钟后开始执行。结论经由以上的学习,相信你已经开端相识了transition的用法,transition用来过渡再好不外了,可是仅靠它做不了一些炫酷的动画,我将在接下来的文章继续为你解说animation(动画)、translate(移动)以及transform(变形),跟进我的脚步吧,跟我一起在2020年前掌握css动画!点击【右上角,关注 子瑜说IT 】连续更新IT资讯以及web前端开发教学8年开发老码农福利赠送:网页制作,网站开发,web前端开发,从最零基础开始的的HTML+CSS+JavaScript。

jQuery,Ajax,node,angular框架等到移动端小法式项目实战【视频+工具+系统门路图】都有整理,送给每一位对编程感兴趣的小同伴获取方式:右上角有私信,请私信发我:01 即可获取!。


本文关键词:web,前端,入门,到,实战,彻底,掌握,css,动画,「,AG真人官方

本文来源:AG真人官方-www.shihuazhen.com

Copyright © 2001-2021 www.shihuazhen.com. AG真人官方科技 版权所有  ICP备案:ICP备66508453号-2