CSS3中的元素过渡特性transition示例详解

2021-01-20 19:05 jianzhan

序言

W3C规范中对css3的transition这是样叙述的:“css的transition容许css的特性值在1定的時间区段内光滑地过渡。这类实际效果能够在电脑鼠标点击、得到聚焦点、被点一下或对元素任何更改中开启,并圆润地以动漫实际效果更改CSS的特性值。”

过渡transition

先看来1个小事例

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

这样当我的光标飘浮在demo的1一瞬间

它的宽度变为了200px

有木有方法让大家光标飘浮在元素时,元素宽度迟缓变宽呢

在CSS3以前大家只能应用不便的js脚本制作

可是如今大家只必须加上1个特性

便可以做到大家的目地

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

transition它的功效便是特定当你的元素一些款式产生转变时

这些款式能够逐渐过渡到最后特性值

它是1个复合型特性

有下列子特性

      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():

      两个主要参数的步进电机涵数。第1个主要参数为正整数金额,特定涵数步数。第2个主要参数赋值是start或end,特定每步的值产生转变的時间点。第2个主要参数可选,默认设置值为end。

      cubic-bezier(num, num, num, num):

      特殊的贝塞尔曲线图种类,4个标值需在[0, 1]区段内

大多数大家都用不上,最常见的大约便是大家默认设置的ease和线形过渡linear了

transition-delay 一样是可选特性值

假如你要想延迟时间过渡,换句话说假如大家要想在过渡前停1小会儿

那末就在这个复合型特性的最终加上大家必须延迟时间的時间“数据+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过渡特性就不必须考虑到这么多

元素与元素之间互不危害

也有1点要留意,元素过渡必须了解款式实际的起止特性和结尾特性

例如说大家事例中的width确立了从100px过渡到200px

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

更改了飘浮款式width为auto

大家发现当光标飘浮元素后

width特性并沒有产生过渡

参加过渡的特性

自然也并不是全部的款式都可以以过渡

例如说你想让 display: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

能够看到这个特性真的是10分强劲

总结

以上便是这篇文章内容的所有內容,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流。