上海定制网站开发,网站利用e4a做app,中国建设银行网站下载安装,网页模板哪个网站可以下载马上就2020年了#xff0c;不知道小伙伴们今年学习了css3动画了吗#xff1f;说起来css动画是一个很尬的事#xff0c;一方面因为公司用css动画比较少#xff0c;另一方面大部分开发者习惯了用JavaScript来做动画#xff0c;所以就导致了许多程序员比较排斥来学习css动画(…马上就2020年了不知道小伙伴们今年学习了css3动画了吗说起来css动画是一个很尬的事一方面因为公司用css动画比较少另一方面大部分开发者习惯了用JavaScript来做动画所以就导致了许多程序员比较排斥来学习css动画(至少我是)但是一个不懂css动画的前端工程师不能称之为掌握css3其实当你真正学习css动画之后你会被它的魅力所吸引的它可以减少代码量、提高性能。话不多说马上和我一起去学习今天的主角transition吧transition 语法值描述transition-durationtransition效果需要指定多少秒或毫秒才能完成transition-property指定CSS属性的nametransition效果transition-timing-function指定transition效果的转速曲线transition-delay定义transition效果开始的时候transition翻译成中文是过渡的意思顾名思义它就是专门做过渡动画的比如一些放大缩小隐藏显示等下面我们一起来学习一下他的语法。transition-durationtransition效果需要指定多少秒或毫秒才能完成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属性的nametransition效果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))。快-快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前端开发从最零基础开始的的HTMLCSSJavaScript。jQueryAjaxnodeangular框架等到移动端小程序项目实战【视频工具系统路线图】都有整理送给每一位对编程感兴趣的小伙伴获取方式右上角有私信请私信发我01 即可获取
