CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:blue;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

当鼠标放上去 长度平滑到300px

Css transition的更多相关文章

  1. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  2. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  3. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  4. CSS transition 的默认值

    语法 transition: property duration timing-function delay|initial|inherit; 示例: div {   width: 100px;    ...

  5. CSS transition & shorthand property order

    CSS transition & shorthand property order shorthand property https://developer.mozilla.org/en-US ...

  6. CSS transition 过渡 详解

    transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...

  7. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  8. css transition transform animation例子讲解

    1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...

  9. 鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

随机推荐

  1. 获取iOS系统版本 --- UIDevice

    UIDevice类是一个单例,其唯一的实例( [UIDevice currentDevice] ) 代表了当前使用的设备. 通过这个实例,可以获得设备的相关信息(包括系统名称,版本号,设备模式等等). ...

  2. C#基础之枚举

    1.认识Enum 以前一直以为Enum是值类型,在VS中查看Enum的定义时才发现它是一个抽象的类.但是这个类很奇怪,Enum继承了ValueType这个很熟悉的值类型基类,它是唯一一个继承自Valu ...

  3. 【WEB API项目实战干货系列】- 接口文档与在线测试(二)

    上一篇: [WEB API项目实战干货系列]- Web API 2入门(一) 这一篇我们主要介绍如何做API帮助文档,给API的调用人员介绍各个 API的功能, 输入参数,输出参数, 以及在线测试 A ...

  4. 教你写一个Android可快速复用的小键盘输入控件

    引子 在Android项目开发中特别是一些稍大型的项目,面对需求文档的时候你经常会发现很多地方用到了同样的组件,但是又略有不同.比如这个: 右边是一个小键盘输入板,左边当焦点不同的时候分别用右边的小键 ...

  5. nodejs初学————安装篇（iis8.5+windows8.1）

    nodejs很久前就想玩玩,不过一直没时间,昨晚花了4个小时来捣鼓到iis上架设成功了,废话不说了. PS:我的系统是windows8.1 x64,所以自带iis8.5的,下载的文件也是x64的. N ...

  6. 备忘：SSRS技巧三则

    前言 最近在弄SSRS,发现了三个小技巧.在此记录一下.免得以后忘了. 技巧 1. SSRS输出成EXCEL时,让两个dataset各占一个sheet, 这个简单,在其中一个table的属性加上pag ...

  7. IndexOf、LastIndexOf、Substring的用法

     String.IndexOf String.IndexOf 方法 (Char, Int32, Int32)报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置 ...

  8. [USACO2002][poj1946]Cow Cycling（dp）

    Cow CyclingTime Limit: 1000MS Memory Limit: 30000KTotal Submissions: 2468 Accepted: 1378Description ...

  9. [c#基础]值类型和引用类型的Equals，==的区别

    引言 最近一个朋友正在找工作,他说在笔试题中遇到Equals和==有什么区别的题,当时跟他说如果是值类型的,它们没有区别,如果是引用类型的有区别,但string类型除外.为了证实自己的说法,也研究了一 ...

  10. 将Image转化为BufferImage

    public class BufferedImageBuilder { private static final int DEFAULT_IMAGE_TYPE = BufferedImage.TYPE ...