首页  >  文章  >  web前端  >  关于CSS3元素中过渡属性transition的详细介绍

关于CSS3元素中过渡属性transition的详细介绍

黄舟
黄舟原创
2017-05-21 15:58:142394浏览

过渡动画是动画的基础 

在学习动画属性之前
我们需要先了解过渡属性transition

过渡transition

先来看一个小例子

<p class="demo"></p>
.demo {    width: 100px;    height: 100px;    background-color: royalblue;}.demo:hover {    width: 200px;}

这样当我的光标悬浮在demo的一瞬间
它的宽度变成了200px

有没有办法让我们光标悬浮在元素时,元素宽度缓慢变宽呢
在CSS3之前我们只能使用麻烦的js脚本
但是现在我们只需要添加一个属性
就可以达到我们的目的

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s; /*增*/}.demo:hover {    width: 200px;}

transition它的作用就是指定当你的元素某些样式发生变化时
这些样式可以渐渐过渡到最终属性值

它是一个复合属性
有以下子属性

  • transition-property:指定过渡或动态模拟的css属性

  • transition-duration:指定过渡所需要的时间

  • transition-timing-function:指定过渡函数

  • transition-delay:指定开始出现的延迟时间

transition-property 我们想要哪种属性过渡就写哪种属性
或者干脆写过渡所有属性的关键字all

transition-duration渐变时间属性值就是“数字+s”
代表几秒钟内过渡

transition-timing-function 是可选的属性值,有如下可选值

  • linear
    线性过渡,等价贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

  • ease(默认)
    平滑过渡,等价贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

  • ease-in
    由慢到快,等价贝塞尔曲线(0.42, 0, 1.0, 1.0)

  • ease-out
    由快到慢,等价贝塞尔曲线(0, 0, 0.58, 1.0)

  • ease-in-out
    由慢到快再到慢,等价贝塞尔曲线(0.42, 0, 0.58, 1.0)

  • step-start
    等同 steps(1, start)

  • step-end
    等同 steps(1, end)

  • steps():
    两个参数的步进函数。第一个参数为正整数,指定函数步数。第二个参数取值是start或end,指定每一步的值发生变化的时间点。第二个参数可选,默认值为end。

  • cubic-bezier(num, num, num, num):
    特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

大多我们都用不上,最常用的大概就是我们默认的ease和线性过渡linear了

transition-delay 同样是可选属性值
如果你想要延迟过渡,换句话说如果我们想要在过渡前停一小会儿
那么就在这个复合属性的最后添加我们需要延迟的时间“数字+s”

这个属性可以对多个不同的属性进行设置
我们要做的就是使用逗号隔开

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s linear, 
                height 1s linear,
                background-color 2s 1s; /*改*/}.demo:hover {    width: 200px;    height: 200px;    background-color: lawngreen; /*改*/}

鼠标移出元素后,元素又过渡回来

使用过渡属性而不是脚本的另一个原因是
脚本方法改变多个元素样式可能会产生冲突
解决的办法是使用bool变量加锁,还是很麻烦
我们的transition过渡属性就不需要考虑这么多
元素与元素之间互不影响


还有一点要注意,元素过渡需要知道样式具体的起始属性和末尾属性
比如说我们例子中的width明确了从100px过渡到200px

.demo:hover {    width: auto; /*改*/
    height: 200px;    background-color: lawngreen; /*改*/}

改变了悬浮样式width为auto
我们发现当光标悬浮元素后
width属性并没有发生过渡

参与过渡的属性

当然也不是所有的样式都可以过渡
比如说你想让 <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:block 过渡到 display:inline-block
那是不可能的
有以下属性参与过渡

  • color

  • visibility

  • opacity

  • vertical-align

  • z-index

  • clip

  • width/height

  • top/bottom/left/right

  • background-color/position

  • border-top/bottom/left/right-color/width

  • border/letter/word-spacing

  • font-size/weight

  • line-height

  • margin/padding-top/bottom/left/right

  • max/min-height/width

  • outline-color/width

  • text-indent/shadow

可以看到这个属性真的是十分强大

以上是关于CSS3元素中过渡属性transition的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn