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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
html5 标签
Jul 16 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 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
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
javascript实现yield的方法
2013/11/06 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
深入浅析vue中cross-env的使用
2019/09/12 Javascript
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python实现简易内存监控
2018/06/21 Python
python贪吃蛇游戏代码
2020/04/18 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Python3 翻转二叉树的实现
2019/09/30 Python
python yield和Generator函数用法详解
2020/02/10 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
四年级科学教学反思
2014/02/10 职场文书
运动会通讯稿200字
2014/02/16 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
消防演习通知
2015/04/25 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript