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,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...
随机推荐
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- 对‘pthread_create’未定义的引用
由于pthread库不是Linux系统默认的库,连接时需要使用库libpthread.a,所以在使用pthread_create创建线程时,在编译中要加-l pthread参数: gcc exampl ...
- 百度Echarts使用心得
echarts官网:http://echarts.baidu.com/index.html 最近用了echart,有一下问题需要注意: 1.echarts的使用实例 代码:从地图中取得whitejso ...
- SonarQube 项目配置文件
费话不说,直接上代码: 需要注意的地方: 1. 每个项目的key不能重复. 2. 注意编码方式. 3. 注意分模块的写法. 4. 忽略源码文件的写法. # Required metadatasonar ...
- 浅说CPU并行计算与GPU并行计算
最近在学一门课,叫做“C++与并行计算”.要用到多CPU(进程)并行的原理,实现语言是C++的MPI接口.联想到上学期用到CUDA C/C++来做并行计算,就对这两门语言做一个总结,分享下自己关于并行 ...
- 为什么所有浏览器的userAgent都带Mozilla
参看下面链接:<为什么所有的浏览器的userAgent都带Mozilla>
- inux中tail命令---用于查看文件内容
linux中tail命令---用于查看文件内容 最基本的是cat.more和less.1. 如果你只想看文件的前5行,可以使用head命令,如:head -5 /etc/passwd2. 如果你想查看 ...
- listview滚动到底部
方法一: // msgListView是ListView控件 // adapter是ListView绑定的Adapter,如果不方便直接使用,也可以通过ListView的getAdapter()方法获 ...
- 一个纯CSS DIV天气动画图标【转扒的】
<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...
- 简便数据库——ORMLite框架
一.创建DataBase //使用 Singleton 避免產生多個實例(instance),要注意 thread safe 這邊使用雙重鎖定(Double-checked locking) 使用 T ...