阅读 84

3分钟看懂过度【transition】

前言

大家好,我是cv竹叶,我一直对:transition过度animation动画transform变换,这些属性摸不着头脑,就像是对初恋一样让人迷惑。

今天,我要用3分钟,就理解其中的transition过度属性

image.png

transition

该属性,用于在一定的时间区间内css进行平滑地过渡,像这样子:

2.gif

可以看到,鼠标移动上去之后,可以看到背景颜色从红变蓝,高度也变更高了,这就是transition过度

也就是说,当页面里面的样式在改变时,加了transition属性,就会产生过度效果!

transition属性参数

transition包含四个参数值,用法样板:transition: width 1s ease 0.1s

  • transition-property(执行变换的属性):
    • none 没有属性需要执行过渡。
      复制代码
    • all 所有属性发生变化(默认值)。
      复制代码
    • indent 元素的某一个css属性值,如:width、height。
      复制代码
  • transition-duration(执行变换的持续时间)
    • 用来指定元素过度过程的持续时间,可选单位为s或ms。默认值为0。
      复制代码
  • transition-timing-function (变换的速率变化模式)
    • 用来根据时间的推进,去改变属性值的变换速率。速率有以下这些参数值:
      复制代码
      • ease(逐渐变慢)
      • linear(匀速)
      • ease-in(加速)
      • ease-out(减速)
      • ease-in-out(加速然后减速)
  • transition-delay (变换延迟时间)
    • 用来指定动画开始延迟的时间,也就多少秒后执行动画。
      复制代码

transition属性,可以分不同的css属性值,进行不同的过度,只需要','号隔开就好!

举个板栗:

/* 分别单独指定过度效果 */
transition: background-color 1s ease 0.1s,height 1s ease-in-out 0.1s;
/* 指定全部过度效果都一样 */
transition: all 3s;

/* 样式例子 */
.box {
    background: red;
    width: 100px;
    margin: auto;
    height: 100px;
    color: #fff;
    transition: background-color 1s ease 0.1s,height 1s ease-in-out 0.1s;
}
.box3:hover{
    background: blue;
    height: 150px;
}

/* 页面 */
<div class="box">cv竹叶</div>
复制代码

transition兼容性

根据canius,可以知道兼容性,ie10以下是不支持的

image.png

总结

灵活运用transition过度属性,可以让你的页面不再死板僵硬,多一份色彩。帮我看下时间,3分钟到了嘛,到了的话,帮我点个赞吧!

image.png

文章分类
前端
文章标签