CSS3 动画系列3-transition（过渡） √
http://www.css88.com/archives/5403

如果丘处机没有路过牛家村，中国将是最发达国家
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        .box1 {

            width: 100px;

            height: 100px;

            background: #F00;

            transition: width 2s, height 2s, background 2s;

        }

        .box1:hover {

            width: 200px;

            height: 50px;

            background: #FF0;

        }

    </style>

</head>

<body>

    <div class="box1">如果丘处机没有路过牛家村，中国将是最发达国家</div>

</body>

</html>

手机支付宝
http://qianbao.alipay.com/index.htm

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        span {

            position: relative;

            color: navy;

            font-size: 100px;

            font-family: arial;

            opacity: 0;

            /* transition-property transition-duration transition-timing-function transition-delay */

            -webkit-transition: all .8s ease .3s;

            -moz-transition: all .8s ease .3s;

            transition: all .8s ease .3s;

        }

        .word1 {

            left: -100px;

        }

        .word2{

            left: 100px;

        }

        .anim-word1 {

            left: 0;

            opacity: 1;

        }

        .anim-word2 {

            left: 0;

            opacity: 1;

        }

    </style>

</head>

<body>

    <span class="word1">shanghai</span>

    <span class="word2">hangzhou</span>

    <script>

        var word = document.getElementsByTagName('span')

        var word1 = word[0]

        var word2 = word[1]

        setTimeout(function() {

            word1.className = 'word1 anim-word1'

            word2.className = 'word2 anim-word2'

        }, 1000)

    </script>

</body>

</html>

☀【动画】过渡 transition的更多相关文章

  1. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  2. transition 动画过渡

    1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  4. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  5. CSS3之边框样式（动画过渡）

    简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

  6. css3动画（transition）属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  7. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  8. css动画过渡

    css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...

  9. 初学vue----动画过渡transition简单部分

    使用动画效果要用transition包裹,transition(<trsnsition name="xx"><div></div></tr ...

  10. CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

随机推荐

  1. Volley网络请求框架的基本用法

    备注: 本笔记是参照了 http://blog.csdn.net/ysh06201418/article/details/46443235  学习之后写下的 简介:  Volley是google官网退 ...

  2. leetcode problem 42 -- Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  3. java basic

    //java 声明常量 //final 数据类型 常量名=值; //as: final float PI=3.14f;/ PI=3.14002F //默认浮点为 double //break:跳出多重 ...

  4. 如何使用命令提示符进入mysql

    如果mysql安装时的路径不是在C盘,应进入mysql的bin目录中,然后在命令提示符中输入“mysql -u USERNAME -pPASSWORD ” 如果如果mysql安装时的路径是在C盘,直接 ...

  5. grep线上环境精典案例后续

    请执行命令取出 linux 中 eth0 的 IP 地址(请用 cut,有能力者也可分别用 awk,sed 命令答). 自己的方法: [root@nginx_back ~]# ifconfig eth ...

  6. 学习PYTHON第一天

    需要掌握的内容 1.编程语言 2.python   .  C#   JAVA 3.python:  pypy    cpython     jpython 4.执行方式 解释器 文件执行 5.指定解释 ...

  7. 【python】疯了，掉坑里出不来了

    学软件最头疼的事情就是版本换来换去: 各种配置错误,疯了,疯了--

  8. windows 系统下，小数据量Oracle用户物理备份

    环境:windows Server 2003 oracle 10g,系统间备份 目标系统创建共享文件,原系统挂载共享目录 写批处理脚本,用任务计划定时调用 Rem * 由于系统实时性要求不是很高,数据 ...

  9. Python原型模式

    如果想根据现有对象复制出新的对象并对其修改,可以考虑原型模式(Prototype Pattern) class Point: __slots__ = ("x", "y&q ...

  10. js add media query

    var msViewportStyle = document.createElement("style"); msViewportStyle.appendChild( docume ...