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. 让PowerShell用上Git

    废话 废话一下为什么要在PowerShell上使用Git,有一些项目在公司要开发,回到家了忽然有灵感想要写一写,这个时候将代码托管到网上是最为方便,我所使用的开发工具是vs2013,自然而然想到使用T ...

  2. 什么是co-training

    首先先认识下什么是co-training: 在计算机视觉中,我们都知道训练一个分类器的时候,我们需要两类样本,分别是正样本和负样本.监督训练又可以成为off-line training,就是提前准备好 ...

  3. EasyUI实战经验总结，给有需要的人

    最近公司培训EasyUI,就做下总结吧,给有需要的人. 1.最常用的表格 <div class="easyui-panel" data-options="regio ...

  4. Java学习笔记（十八）——Java DTO

    [前面的话] 在和技术人员的交流中,各种专业术语会出现,每次都是默默的记录下出现的术语,然后再去网上查看是什么意思.最近做项目,需要使用到DTO,然后学习一下吧. 这篇文章是关于Java DTO的,选 ...

  5. 09.C#委托转换和匿名方法(五章5.1-5.4)

    今天将书中看的,自己想的写出来,供大家参考,不足之处请指正.进入正题. 在C#1中开发web form常常会遇到使用事件,为每个事件创建一个事件处理方法,在将方法赋予给事件中,会使用new Event ...

  6. 【Aaronyang原创】用linq取出一个集合中重复的数据

    文章已经迁移:http://www.ayjs.net/2013/07/69/ 文章已经迁移:http://www.ayjs.net/2013/07/69/ 文章已经迁移:http://www.ayjs ...

  7. 10、面向对象以及winform的简单运用（isMdicontainer的设置、timer控件进行倒计时的制作）

    IsMdicontainer的设置 这是对于整个窗体的设置,将一个窗体的IsMdicontainer设置为true之后,再打开新窗体便可以让新窗体被父容器包括在内. 操作方法: 1)先建立一个子窗体C ...

  8. iOS -- 生成有logo的二维码

    - (void)createLogoImage { NSArray *filter = [CIFilter filterNamesInCategory:kCICategoryBuiltIn]; NSL ...

  9. 每天一个linux命令（53）：wget命令

    Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...

  10. jquery tree events didn't work

    You should put your js in $(document).ready() like following. Hope this will help you. $(document).r ...