CSS3元素过渡属性transition
来源:互联网 发布:415打击网络政治谣言 编辑:程序博客网 时间:2024/05/01 21:23
过渡动画是动画的基础
在学习动画属性之前
我们需要先了解过渡属性transition
过渡transition
先来看一个小例子
<div class="demo"></div>
.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属性并没有发生过渡
参与过渡的属性
当然也不是所有的样式都可以过渡
比如说你想让 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
可以看到这个属性真的是十分强大
==主页传送门==
- CSS3元素过渡属性transition
- CSS3过渡属性transition
- CSS3 transition 属性过渡效果 详解
- 【CSS3】动画--过渡属性 transition-property
- 详解css3中transition过渡属性
- CSS3属性transition(过渡)详解
- 【CSS基础】css3 transition过渡属性<四>
- transition属性——css3过渡效果
- css3——transition过渡属性
- CSS3 过渡之transition
- CSS3之过渡Transition
- CSS3之过渡Transition
- CSS3----过渡transition
- CSS3之过渡Transition
- CSS3之过渡Transition
- css3 transition(过渡)
- css3的过渡transition
- css3过渡动画transition
- 字符串转List
- Javascript高级程序设计——6.函数
- python中的模块,包,库的定义
- 洛谷 P1909 买铅笔
- java springMVC 图片缓存问题
- CSS3元素过渡属性transition
- 示波器的使用
- Android学习 (十八) 用GSON解析JSON数据并在ListView中显示
- Java常用类介绍
- Java——Tesseract-OCR使用中文包报错read_params_file
- UML类图简介
- Android CoordinatorLayout解析
- 安卓开发之Button
- mssql数据库单用户修改为多用户访问