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. ace布置小作业: 制作一个简单的电话号码归属地查询软件:JSON解析和Volly发送get请求

    大概就这个样子 用到JSON解析和Volly发送Get请求两个知识点 关于Volly的用法请看我的这篇: http://www.cnblogs.com/AceIsSunshineRain/p/5177 ...

  2. android 6.0(api 23) SDK，不再提供org.apache.http.*(只保留几个类)

    在使用android-async-http的时候我的apl 更新到了23,我的build version也是23的时候出现了,org.apache.http.Header这个类找不到的情况,原因是在a ...

  3. Java环境解析apk文件信息

    概述:Java解析apk文件,获取apk文件里的包名,版本号,图标文件等; 功能:可以提供给windows和linux平台使用; 原理:利用aapt.exe或者aapt这些anroid平台解析apk文 ...

  4. 使用mobile.changePage()时出现的问题（转）

    使用mobile.changePage()页面跳转,当跳转到目标页面时,目标页面中的初始化js如$().ready()及其他引入的js都无法执 行,重新刷新页面后才会执行.想到changePage() ...

  5. 在 Area 中使用RouteAttribute 定义路由, 并支持多语言

    业务上的一个需求, 同一页面, 两种不同的使用方法, 为了区分这两种需求, 需要加一个参数到 URL 中,不改路由的话, 是这样: http://localhost:16269/en-US/Forwa ...

  6. IDEA SSH

    被IDEA各种虐0.0各种配置,没有人教就百度,别人也弄了点,然后整整花了一天,从eclipse转到IDEA真的不容易啊TT

  7. spring cloud教程之使用spring boot创建一个应用

    <7天学会spring cloud>第一天,熟悉spring boot,并使用spring boot创建一个应用. Spring Boot是Spring团队推出的新框架,它所使用的核心技术 ...

  8. 实施项目--.NET实现仓库看板的一些感想

    从一名技术开发人员到实施人员的蜕变,从不同的角度看待同一个问题,或许会有不一样的结果.这里记录一下最近一个项目实施的案例,非常有感触! 一. 项目情况简介 本次项目是给一个国外生产型企业做仓库方面的系 ...

  9. [USACO2003][poj2110]Mountain Walking（二分答案+bfs）

    http://poj.org/problem?id=2110 题意:给你一个n*n矩形(n<=100),每个位置上都有一个数字代表此处山的高度,要从(1,1)走到 (n,n),要求一条路径使得这 ...

  10. [C#]二维码(QR Code)生成与解析

    写在前面 经常在大街上听到扫码送什么什么,如果真闲着没事,从头扫到位,估计书包都装满了各种东西.各种扫各种送,太泛滥了.项目中从没接触过二维码的东东,最近要使用,就扒了扒网络,发现关于解析二维码的类库 ...