CSS3过渡

简介

transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。

transition:[transition-property  transition-duration  transition-timing-function   transition-delay ]
transition: 属性(All所有的) 持续时间 运动曲线 何时开始;

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是 :hover,:active 或者通过 JavaScript 实现的状态变化。

例子:指定 margin-right 属性和 color 属性的过渡,持续时间分别为2s和1s

transition: margin-right 2s, color 1s;

1、transition-property

  • none 没有属性会获得过渡效果。
  • all 所有属性都将获得过渡效果。
  • property 应用过渡效果的 CSS 属性名称列表,列表以逗号分隔

2、transition-duration

duration:定义过渡效果花费的时间
允许取值:time值,它是以秒作单位,默认是0,意味着没有效果

3、transition-timing-function

timing-function:规定过渡效果的时间曲线

 

  • linear :以相同的速度开始至结束,也就是匀速
  • ease:慢速开始,然后中间变快,最后以慢速结束的过渡效果 慢快慢
  • ease-in:慢速开始,快要结束的时候速度会变快的过渡效果 慢快
  • ease-out:快速开始,快要结束的时候速度会变慢的过渡效果 快慢
  • ease-in-out:慢速开始,中间匀速,最后以慢速结束的过渡效果 慢匀慢

 

4、transition-delay

delay:规定效果开始之前需要等待的时间
允许的值:time值,以秒作单位,默认是0

 

posted @ 2022-09-21 10:48  Lamb~  阅读(34)  评论(0编辑  收藏  举报