css3 transiton
div
{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear; // transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
div:hover
{
width:300px;
}
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
css3 transiton的更多相关文章
- CSS3伪类nth-child结合transiton动画实现文字若影若现
css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...
- css3中变形与动画(二)
css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...
- HTML5和css3的总结
简单的罗列一个HTML5的新东西,以后的几天里详细的过一遍一个挺有用的网站:www.css88.com [H5的新标签] 用之前的标签完全可以代替的:header footer aside atric ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- css3动画实例测试
1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...
- CSS3动画效果之transition
CSS3中有两种方式实现动画,transition和animation+@keyframe. 两者的作用机制不一样:transition定义在可能要进行动画的元素上,对某些CSS属性进行监听,一旦CS ...
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- CSS3 transition实现超酷图片墙动画效果
一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...
随机推荐
- JNI_最简单的Java调用C/C++代码
JNI_最简单的Java调用C/C++代码 JNI.是Java Native Interface的简称,中文是"Java本地调用".通过这种技术能够做到下面两点: Java程序中的 ...
- windows下搭建及配置mantis缺陷管理工具
在windows XP 操作系统下,如何更快.更容易地搭建及配置mantis缺陷管理工具呢?以下是我实践的具体步骤: 一.安装mantis的前提环境,需要先安装Apache HTTP Server2. ...
- Sybase配置数据库参数
Sybase配置数据库参数参数配置的两种方法:sp_configure ‘参数名称’,参数值修改参数文件(如:Sybase主机上的 %SYBASE%\servername.cfg) 配置Sybase数 ...
- 关于mysql的安装
上个学期学了数据库后,曾多次试图安装数据库,但由于电脑的种种的原因或者是安装的问题,始终没能安装成功,今天终于succeed. 一.下载 首先从www.mysql.com网站上下载mysql,我下载的 ...
- 学php之翻译wordpress(1)
单看文件结构,wordpress分了3个文件夹 wp-admin,wp-content,wp-includes 和零散的一堆php,暂时不清楚各自的分工 入口文件是index.php <?php ...
- Ubuntu配置OpenGL环境
建立基本编译环境 sudo apt-get install build-essential 安装OpenGL Library sudo apt-get install libgl1-mesa-dev ...
- FMDB将对象放进数据库[二](使用runtime)
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- 构建混合云:配置Azure site to site VPN连接(3)
9. 那么我们来创建网关,创建网关的时候需要注意,看看你的设备是否支持动态网关,在本示例中的Cisco ASA 5550不支持动态网关,所以我们只能创建静态网关: 该创建会花费一定的时间,稍等即可. ...
- Git学习04 --分支管理
每次commit,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD严格来说不是指向提交,而是指向master ...
- QWidget 键盘事件 焦点(源代码级别研究)
在Qt中,键盘事件和QWidget的focus密不可分:一般来说,一个拥有焦点(focus)的QWidget或者grabKeyboard()的QWidget才可以接受键盘事件. 键盘事件派发给谁? 如 ...