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. 棋盘覆盖(大数阶乘,大数相除 + java)

    棋盘覆盖 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 在一个2k×2k(1<=k<=100)的棋盘中恰有一方格被覆盖,如图1(k=2时),现用一缺角的 ...

  2. 力挺8天入门wpf【转载】

    8天入门wpf—— 第八天 最后的补充 摘要: 从这一篇往前看,其实wpf中还有很多东西没有讲到,不过我的原则还是将比较常用的知识点过一遍,如果大家熟悉了这些知识,基本功也就打的差不多了,后续可以等待 ...

  3. Oracle Linux Server 7安装VMwareTools问题

    OracleLinuxServer7安装VMwareTools问题#./vmware-install.pl时报错:#-bash: ./vmware-instal.pl:/usr/bin/perl:ba ...

  4. 【巧妙的模拟】【UVA 10881】 - Piotr's Ants/Piotr的蚂蚁

    </pre></center><center style="font-family: Simsun;font-size:14px;"><s ...

  5. centos 6 编译安装httpd-2.4

    centos6 yum安装的apr版本已经不适用httpd-2.4版本了.所以,需要源码编译apr以及apr-util 1. 下载源码: cd /usr/local/src/ wget http:// ...

  6. SQL Server 强行Insert包含自增列值的记录

    SET IDENTITY_INSERT 表 ON INSERT INTO 表 ([ID] ,[SequenceNumber] ,[EnumCode] ,[Description]) VALUES ( ...

  7. mvc 微软票据验证

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  8. CAS实现单点登录流程

    CAS实现单点登录 环境 客户端: www.app1.com CAS服务器: www.cas-server.com 1.浏览器:发起请求 www.app1.com 2. 客户端:Authenticat ...

  9. rsync 安装使用详解

    rsync是类unix系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.它的特性如下:可以镜像保存整个目录树和文件系统.可以很容易做到保持原来文件的权限.时间.软硬链接 ...

  10. HeadFirst设计模式读书笔记--目录

    HeadFirst设计模式读书笔记(1)-策略模式(Strategy Pattern) HeadFirst设计模式读书笔记(2)-观察者模式(Observer Pattern) HeadFirst设计 ...