<!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>

CSS3 transition 动画过度属性的更多相关文章

  1. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  2. css3 transition动画

    CSS3: 一.transition: <property> <duration> <animation type> <delay> eg: .div{ ...

  3. CSS3 transition 过度

    一个元素在不同的状态之间进行平滑的交换 CSS3中使用transition属性实现过度效果 一个简单的例子: img{ background-image:url("img/1.jpg&quo ...

  4. css动画效果之transition（动画过渡效果属性）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  6. appendChild与Transition动画

    在createElement之后,直接把这个div append到body中,是不会触发css3 transition动画的 必须要让浏览器计算div的css属性后,然后再设置div的style,才会 ...

  7. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  8. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  9. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

随机推荐

  1. 转载自php 大牛的学习计划 人生规划

    2012年偶决定开始写博客了,不为别的,就希望可以通过博客记录我的成长历程同时也希望可以帮助一些刚毕业,刚入行业的兄弟姐们们.我们是一群充满浮躁.抱怨.迷茫的程序猿,想一想3年就这么过去了,社会变得更 ...

  2. ubuntu 终端只显示当前目录名称

    修改.bashrc文件: 原来: #修改终端提示颜色 color_prompt=yes if [ "$color_prompt" = yes ]; then PS1='${debi ...

  3. 面试题 43 n 个骰子的点数

    ; void printfProbability(int number) { ) return; ]; p[] = ]; p[] = ]; memset(p[], , )); memset(p[], ...

  4. DDUI For Delphi Seattle Directui界面组件

    http://www.delphigear.cn/0/11258/go.aspx http://bbs.csdn.net/topics/390285613

  5. Windows 8.1 explorer.exe总是崩溃的解决办法

    方法1 卸载此补丁 KB3033889 方法2 打补丁, 更新 3033889 导致使用日语. 朝鲜语和中文输入法的系统中 Windows 资源管理器停止响应 https://support.micr ...

  6. pyqt cvs保存

    # -*- coding: utf-8 -*-__author__ = 'Administrator'import sys, csvfrom PyQt4 import QtGui, QtCore cl ...

  7. AssemblyInfo.cs文件的作用

    在asp.net中有一个配置文件AssemblyInfo.cs主要用来设定生成的有关程序集的常规信息dll文件的一些參数,以下是默认的AssemblyInfo.cs文件的内容详细介绍 //是否符合公共 ...

  8. Laravel 4 Blade模板引擎

    http://my.oschina.net/5say/blog/201290 模板输出 基本输出 1 <!-- app/views/example.blade.php --> 2 < ...

  9. IT痴汉的工作现状25-技术之养成

    要想成为技术大牛,除了天赋以外,更与后天的刻苦努力分不开.伟仔我天生愚顿.工作多年后仍与大牛相差甚远,更加觉得技术的养成是一个异常困难的过程. 是我不用功吗?我不这样觉得.伟仔尽管是个懒人,但对于技术 ...

  10. 浪潮服务器通过ipmitool获取mac地址

    一.GPU服务器 #配置两个主板集成千兆四个外插PCI万兆网卡# 板载网卡可以使用命令获取到:RAW 0X30 0X21 就可以读取到第一块网卡的MAC,就是以下返回值的后6位. 0c,c4,7a,5 ...