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. Activiti系列：几个历史数据表之间的关系

    1. 一个流程执行完之后,会在act_hi_procinst表内产生一条数据: 3. 一个流程中的每个节点都会在act_hi_actinst表内产生一条数据,比如下面这个流程执行完之后会在在act_h ...

  2. 关于java按位操作运算

    <1>.在了解位移之前,先了解一下正数和负数的二进制表示形式以及关系:举例15和-15:15 的原码: 00000000 00000000 00000000 00001111     补码 ...

  3. [CareerCup] 4.8 Contain Tree 包含树

    4.8 You have two very large binary trees: Tl, with millions of nodes, and T2, with hundreds of nodes ...

  4. Linux（10.18-10.25）学习笔记

    一.学习目标 1. 了解常见的存储技术(RAM.ROM.磁盘.固态硬盘等) 2. 理解局部性原理 3. 理解缓存思想 4. 理解局部性原理和缓存思想在存储层次结构中的应用 5. 高速缓存的原理和应用 ...

  5. 使用AChartEngine第一步：在项目中配置AChartEngine环境

    1. 从AChartEngine官网上下载acharengine的jar文件包. 地址:https://code.google.com/p/achartengine/downloads/list 2. ...

  6. IIS7 IIS7.5 配置备份

    IIS 7 提供了一个新的命令行工具 Appcmd.exe,可以使用该工具来配置和查询 Web 服务器上的对象,并以文本或 XML 格式返回输出. IIS 备份还原命令如下: 开始-运行-CMD 进入 ...

  7. PHP Yii1.1.13（一）：命令行创建应用~shop

    第一节 初始目录结构 (1)初识目录结构 在创建应用之前,我们来看一下Yii 1.x版本的目录结构:将yii-1.1.13安装文件解压到网站根目录下,打开framework目录,其目录如下图所示 (2 ...

  8. 微软发布独立Android模拟器 为开发者提供测试

    微软发布了 Visual Studio 2015 正式版,除了免费的社交版之外,另外也有付费的专业版.这套工具除了提供 Windows 应用程序的整合环境之外,你也可以利用它来开发 Android 程 ...

  9. Ruby On Rails 常用的精品Gem汇总

    首先需要注明一点,本文是原创的并不是从其它地方转载.所有的数据是我从 GitHub 和 RubyGems 上码下来的,数据的截取时间就是本文的发布日期. RubyGems 的下载量可以看到在用这个 g ...

  10. Newtonsoft.Json之JArray, JObject, JPropertyJValue

    JObject staff = new JObject(); staff.Add(new JProperty("Name", "Jack")); staff.A ...