当前位置: 首页 > CSS3学习笔记 > 正文

CSS3过渡 transition

之前我们整理了CSS3中的动画属性 Transform 转换,今天我们接着一起来看看CSS3中的另一个动画属性 Transition 过渡。

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

CSS3 过渡

下面我们就从语法和属性值,开始来学习transition的具体使用

transition 语法:

transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
或
transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>][, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

[注意] IE9-不支持该属性,safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀;而其余高版本浏览器支持标准写法。

transition是一个复合属性, 适用于所有元素,包含伪对象:after:before。通过下面这四个子属性的配合来完成一个完整的过渡效果。

  • transition-property: 过渡的属性 (默认值为all)
  • transition-duration: 过渡的持续时间 (默认值为0s)
  • transiton-timing-function: 过渡的动画类型 (默认值为ease函数)
  • transition-delay: 过渡的延迟时间 (默认值为0s)

transition-property 过渡属性

语法:

transition-property: none | all | [ property ] [ ,property ]*

transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
其主要值有:none(没有属性改变),all(所有属性改变)这个也是其默认值,property(元素属性名)。
当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,property是可以指定元素的某一个属性值。如果提供多个属性值,以逗号进行分隔。

实例:transition-property: width ,background;

CSS3 过渡

[注意] 请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

transition-duration 过渡持续时间

语法:

transition-duration: <time>[ ,<time> ]*

transition-duration是用来指定元素过渡的持续时间,取值:为数值,单位为s(秒)或者ms(毫秒)。其默认值是0s,也就是过渡时是即时的。如果提供多个属性值,以逗号进行分隔。

transition-timing-function 过渡的动画类型

语法:

transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
或
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

取值:
transition-timing-function 的值允许你根据时间的推进去改变属性值的变换速率,它有6个可能值:

1、ease:平滑过渡(逐渐变慢)默认值,等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear:线性过渡(匀速),等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in:由慢到快(加速),等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out:由快到慢(减速),等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out:由慢到快再到慢(加速然后减速),等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

ease
linear
ease-in
ease-out
ease-in-out

其是cubic-bezier为通过贝赛尔曲线来计算“过渡”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
贝赛尔曲线

其他几个属性的示意图:
transition-timing-function 过渡的动画类型

如果要凭脑子空写出贝赛尔函数的代码,可能比较困难。好在不用你自己去计算,可以到工具网站(如贝赛尔立方)上自动生成想要效果的代码。你也可以在该站点上,体验一把linear,ease,ease-in,ease-out,ease-in-out间的差异。

transition-delay 过渡的延迟时间

语法:

transition-delay: <time>[ ,<time> ]*

transition-delay 用来指定一个过渡动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似。默认大小是”0s”,也就是变换立即执行,没有延迟。

触发过渡的方式

常见的就是伪类触发:hover,:active,:focus,:checked等。还有例如@media媒体查询,根据设备大小,横屏竖屏切换时触发。还有,如click,keydown等JS事件触发,页面加载也能触发就不一一列举了。

1、:hover 鼠标悬停触发,实例:

触发

2、:active 用户单击元素并按住鼠标时触发,实例:

触发

3、:focus 获得焦点时触发,实例:

4、@media触发 符合媒体查询条件时触发,实例:

触发

5、点击事件 用户点击元素时触发,实例:

触发

总之过渡的本质是在时间段内平滑过渡属性值,与怎么触发没有关系。

CSS3过渡 transition:等您来吐槽!

CSS3过渡 transition:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!