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. REST: C#调用REST API (zz)

    由于辞职的原因,最近正在忙于找工作.在这段期间收到了一家公司的上机测试题,一共两道题,其中一道题是关于REST API的应用.虽然在面试时,我已经说过,不懂REST,但那面试PM还是给了一道这题让我做 ...

  2. 在View页面，使用@if(){ }输出判断正确的内容

    @if (true) { Html.Raw("已结束"); } 发现这段代码是正确,但是页面不输出"已结束"三个字,但是也不报错 @if (DateTime.N ...

  3. 交流异步电机的Modelica模型

    Modelica标准库里的异步电机模型过于复杂,为了便于学习,我用最基本的异步电机方程写了一个Modelica模型,公式参照陈伯时的<电力拖动自动控制系统--运动控制系统>第3版的190页 ...

  4. sql 2012艰难的安装

    我平台win7 64位,装了vs2012. 上午开始捣鼓到现在,先是装的sql2005,装了半天,先是32位没成功(各种协议警告ISS,asp.net一类的),后换64位冲突没成功,卸载死的心都有了, ...

  5. 工作随笔——CentOS6.4支持rz sz操作

    yum一句话解决: yum -y install lrzsz

  6. [C/C++基础] C语言常用函数memset的使用方法

    函数声明:void *memset(void *s, int ch, size_t n); 用途:为一段内存的每一个字节都赋予ch所代表的值,该值采用ASCII编码. 所属函数库:<memory ...

  7. sql server 使用函数辅助查询

    函数是所有语言系统下都具备的内部数据处理过程,SQL SERVER也同样内置了许多函数.在SQL SERVER中,函数是由一个或多个T-SQL语句组成的子程序.利用函数可以简化数据的处理操作. 函数分 ...

  8. Git.Framework 框架随手记-- 分享一个"比较垃圾"的项目

    本文主要分享一个Git.Framework 开发的一个项目的部分源码,此项目代码"比较垃圾",所以请各位码农,码畜,码神,码圣勿喷!发此文只为记录工作问题以及分享问题! 一. 项目 ...

  9. Cordova4.0 系列 -- 基本环境搭建(1)

    一. 安装Node.js基本环境 官网下载地址:https://nodejs.org/ 安装成功之后可以使用简单命令查看其版本 node -v npm相关命令 node cli.js install ...

  10. 第三十三课：jQuery Deferred详解1

    之前我们讲了Mochikit Deferred,JSDeferred,现在讲jQuery Deferred.首先,我们先来讲下他们的区别: 在保存回调函数时,Mochikit Deferred(doj ...