前端学习笔记(11)之过渡属性(transition)详解

时间:2020-7-30 作者:admin


有四个transition属性可以影响过渡效果

指定要执行过渡的属性 transition-property:

  • 值width height,多个属性间使用逗号隔开。
  • 如果所有属性都需要过渡,可以用all关键字。
  • 大部分属性都支持过渡效果。
  • 只要是值可以计算的,就可以过渡。
  • 像素 角度 颜色 都是可以过渡的。
  • 注意:过渡时,必须是从一个有效数值向另外一个有效数值进行过渡。

过渡效果持续的时间 transition-duration:

  • 指定过渡效果持续的时间。
  • 时间单位: s 和 ms 1s = 1000ms
  • 如果多个要设置过渡的属性,也用逗号设置多个过渡时间100ms,2s;分别制定过渡时间。

过渡的时序函数 transition-timing-function

可选值:
ease 默认值,慢速开始,先加速,再减速
linear 匀速运动
ease-in 加速运动
ease-out减速运动 开始速度峰值,然后减速
ease-in-out 先加速后减速
cubic-bezier()贝塞尔曲线来指定时序函数http://cubic-bezier.com
steps(2 ,end/strat) 分步执行过渡效果。
第一个值是分几步执行。
第二值是决定在每一步的开始还是结束执行。
当position:duration是十秒,分两步执行每步是五秒的,end是在五秒结束的时候执行动作,start则是在5s的一开始就执行。

过渡效果的延迟 transition-delay

等待一段时间后再执行过渡。属性值是时间。

简写属性transition

可以同时设置这四个值,并且没有严格的次序要求。
只有一个要求:
如果写两个时间 前边的默认是持续时间 后边的是默认时间。
如果写一个时间,这个时间指的是持续时间。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。