css3的transition属性详解


Posted in HTML / CSS onDecember 15, 2014

transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.
这个属性一般搭配:hover来使

下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒的时间变成黄色,变化方式是linear

复制代码
代码如下:

div{ background-color:red; transition:background-color 1s linear 0.2s;}
div:hover{ background-color:yellow;}
<div>思思博士</div>

鼠标没放上去之前:

css3的transition属性详解

鼠标放上去0.2s后 的变化过程:

css3的transition属性详解

鼠标放上去的最终效果:

css3的transition属性详解

看到这里 大家对与这个属性的用法,心里面应该有了底了.

对于这个属性,每个参数都有一个对应的属性名,也就是说这个属性是可以拆开写的.

非简写形式:

复制代码
代码如下:

/*div{ background-color:red; transition:background-color 1s linear 0.2s;}*/
div{background-color:red; transition-property:background-color; transition-duration:1s; transition-timing-function:linear; transition-delay:0.2s}
div:hover{ background-color:yellow;}

transition还可以过渡多个效果.

复制代码
代码如下:

div{ background-color:red; color:black; height:50px; transition:background-color 1s linear,color 1s linear,height 1s linear;}
div:hover{ background-color:yellow; color:#F00; height:100px;}
HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 #HTML / CSS
CSS3简单实现照片墙
Dec 12 #HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 #HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 #HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 #HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 #HTML / CSS
CSS3动画效果回调处理详解
Dec 10 #HTML / CSS
You might like
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
Python sys.path详细介绍
2013/10/17 Python
python读取html中指定元素生成excle文件示例
2014/04/03 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python+pyqt5编写md5生成器
2019/03/18 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
法律专业推荐信范文
2013/11/29 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
检讨书之工作不认真
2019/08/14 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS