资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS3的transition属性属性有什么作用

这篇文章主要讲解了“CSS3的transition属性属性有什么作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3的transition属性属性有什么作用”吧!

成都创新互联从2013年创立,是专业互联网技术服务公司,拥有项目网站设计、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元坡头做网站,已为上家服务,为坡头各地企业和个人服务,联系电话:13518219792

一、说明

1.1 定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property:规定设置过渡效果的CSS属性的名称。

  • transition-duration:规定完成过渡效果需要多少秒或毫秒。

  • transition-timing-function:规定速度效果的速度曲线。

  • transition-delay:定义过渡效果何时开始。

1.2 语法

transition: property duration timing-function delay;

1.3 transition-timing-function
1.3.1 语法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);

1.3.2 说明
  • 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之间的数值。

二、示例



    linear
    ease
    ease-in
    ease-out     ease-in-out     cubic-bezier

linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier

理解CSS3属性transition

感谢各位的阅读,以上就是“CSS3的transition属性属性有什么作用”的内容了,经过本文的学习后,相信大家对CSS3的transition属性属性有什么作用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


本文名称:CSS3的transition属性属性有什么作用
文章转载:http://cdkjz.cn/article/ijgoco.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220