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


Posted in HTML / CSS onNovember 30, 2016

前言

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

过渡transition

先来看一个小例子

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

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

它的宽度变成了200px

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

有没有办法让我们光标悬浮在元素时,元素宽度缓慢变宽呢

在CSS3之前我们只能使用麻烦的js脚本

但是现在我们只需要添加一个属性

就可以达到我们的目的

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

transition它的作用就是指定当你的元素某些样式发生变化时

这些样式可以渐渐过渡到最终属性值

CSS3中的元素过渡属性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; /*改*/
}

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

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

使用过渡属性而不是脚本的另一个原因是

脚本方法改变多个元素样式可能会产生冲突

解决的办法是使用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

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

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 #HTML / CSS
前端制作动画的几种方式(css3,js)
Dec 12 #HTML / CSS
CSS3 三维变形实现立体方块特效源码
Dec 15 #HTML / CSS
css3学习之2D转换功能详解
Dec 23 #HTML / CSS
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 #HTML / CSS
学做Bootstrap的第一个页面
May 15 #HTML / CSS
css3实现背景模糊的三种方式
You might like
解决GD中文乱码问题
2007/02/14 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
零基础php编程好学吗
2019/10/11 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
中国旅游网站:途牛旅游网
2019/09/29 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
论文评语大全
2014/04/29 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
合同范本之电脑出租
2019/08/13 职场文书