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的更多相关文章

  1. CSS3伪类nth-child结合transiton动画实现文字若影若现

    css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...

  2. css3中变形与动画(二)

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...

  3. HTML5和css3的总结

    简单的罗列一个HTML5的新东西,以后的几天里详细的过一遍一个挺有用的网站:www.css88.com [H5的新标签] 用之前的标签完全可以代替的:header footer aside atric ...

  4. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  5. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  6. CSS3动画效果之transition

    CSS3中有两种方式实现动画,transition和animation+@keyframe. 两者的作用机制不一样:transition定义在可能要进行动画的元素上,对某些CSS属性进行监听,一旦CS ...

  7. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  8. 【CSS3】transition过渡和animation动画

    转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...

  9. CSS3 transition实现超酷图片墙动画效果

    一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...

随机推荐

  1. jQuery——AJAX(一)

    jQuery.ajax(options):通过HTTP请求加载远程数据, 参数:options(可选),ajax请求设置.所有选项都是可选的. 返回值:XMLHttpRequest function ...

  2. WeixinJSBridge:微信浏览器内置JavaScript 对象

    微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...

  3. C# ?? 操作符示例

    static int? GetNullableInt() { return null; } static string GetStringValue() { return null; } static ...

  4. asp.net 常用的3中身份验证

    1. windows验证: IIS根据应用程序的设置来进行身份验证,要使用这中验证方式,必须禁止使用匿名用户登录. 2. Forms验证: 通过Cookies来保存用户凭证,对未登录的用户 重定向到自 ...

  5. iOS开发面试题整理 (一)

    1. Object-C有多继承吗?没有的话用什么代替? cocoa 中所有的类都是NSObject 的子类多继承在这里是用protocol 委托代理 来实现的 你不用去考虑繁琐的多继承 ,虚基类的概念 ...

  6. MVC思想架构的简单自定义UITableViewCell

         在iOS的开发过程中,架构思想是很重要的一部分,目前的主流应该分为MVC与MVVM两种,在这里不做过多的区分,有兴趣的同学可以看看唐巧大神的一篇文章<被误解的MVC和被神化的MVVM& ...

  7. SQL中Truncate的用法(转)

    转自:http://www.studyofnet.com/news/555.html 本文导读:删除表中的数据的方法有delete,truncate, 其中TRUNCATE TABLE用于删除表中的所 ...

  8. oracle函数trunc的使用

    1.日期比较时精确到日,可以使用 TRUNC(sysdate,'dd')函数.函数支持格式有:yyyy MM  dd  hh Mi可以用   select TRUNC(sysdate,'yyyy') ...

  9. [zz]npm安装错误解决方法

    错误: npm ERR! at Object.parse (native) npm ERR! at Packer.readRules (/usr/local/lib/node_modules/npm/ ...

  10. 踩坑学php(1)

    前言: 为什么要学php 呢?作为一个前端,一直有着了解后台的好奇心:作为一个计算机毕业的,一直有着实践更多设计模式和数据库相关的东西:而php 非常流行,拥有非常多的资源,入门应该容易: 为什么叫& ...