<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS3变形transition</title>

    </head>

    <style>

        /*div#translate {

            width: 300px;

            height: 300px;

            background: #9D9D9D;

        }

        div#translate:hover{

            -webkit-transform:translate(100px,100px) scale(2,2) rotate(45deg) skew(30deg,30deg);

            !*先x，y移动100培训  缩放2倍  旋转45度 skew倾斜 *!

        }*/

        div#transition{

            width:200px;

            height:200px;

            background-color: green;

            /*-webkit-transition:none 1s linear 0s;*/

            /*-webkit-transition:all 1s linear 0s;*/

            /*transition 属性 变换延续时间  速率变化 延迟时间,属性 变换延续时间  速率变化 延迟时间*/

            -webkit-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;

            -moz-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;

            -ms-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;

            -o-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;

            transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;

        }

        div#transition:hover{

            background-color: #3598DC;

            width:400px;

            height: 400px;

        }

    </style>

    <body>

        <div id="transition"></div>

        <!--<div id="rotat">rotate旋转</div>-->

        <!--<div id="scale">scale缩放</div>-->

        <!--<div id="skew">skew 倾斜</div>-->

        <!--<div id="translate">translate移动</div>-->

        <!--<p>旋转，倾斜 缩放 移动 transform</p>-->

    </body>

</html>

CSS3变形transition

 

CSS3动画变形transition的更多相关文章

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

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

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

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

  3. css3动画：transition和animation

    概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...

  4. 30分钟玩转css3动画， transition，animation

    其实css3动画是就是2种实现,一种是transition,另一种就是animation.transition实现的话就是只能定制开始帧,和结束2帧:而animation实现的话可以写很多关键帧.没有 ...

  5. css3动画入门transition、animation

    css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...

  6. CSS3动画变形Animations

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. CSS3动画效果transition

    1.transition的浏览器支持情况 IE10+支持,IE6\7\8\9都不支持!目前,其他浏览器最新版本都支持,不需要再加前缀 -webkit- 之类的了 2. 还是一步一步说说怎么用trans ...

  8. [转]WebKit CSS3 动画基础

    前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下.首先看看效果http://www.css88.com/demo/css3_Animation/ 很悲剧的是css3动画现在只有WebK ...

  9. CSS3动画--过渡效果

    CSS3动画--过渡效果 transition                               设置四个过渡属性 transition-property          过渡的名称 tr ...

随机推荐

  1. 新增的output元素 progress元素 meter元素 keygen元素

    结果图 <output>是双标签 name:定义对象的唯一属性 for:定义输出域相关的一个或多个元素. form:定义所属的一个至多个表单. progress和meter一般和JS一起使 ...

  2. css3学习--css3动画详解二（3d效果）

    一.设置3D场景 perspective:800       //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴)    //视点的位置 transf ...

  3. CentOS6.5使用本地光盘做yum源 (参考：http://www.jb51.net/os/RedHat/43343.html)

    一.使用光盘做yum源安装软件 mkdir /media/CentOS  #新建CentOS挂载目录 mount -t auto /dev/cdrom /media/CentOS #挂载CentOS光 ...

  4. php基础知识【函数】（1）数组array

    一.排序 1.sort -- 从最低到最高排序,删除原有的键名,赋予新的键名[字母比数字高] 2.rsort -- 逆向排序(最高到最低),删除原有的键名,赋予新的键名[字母比数字高] 3.asort ...

  5. 2016030101 - ubuntu15.1上安装git客户端

    使用ubutun15.1安装git客户端. 根据git官网提示内容(参考http://git-scm.com/download/linux) 1.使用命令:sudo apt-get install g ...

  6. linux下删除内核

    一.概述 笔者的Ubuntu系统刚安装成功后,就不知道怎么会有多个内核,但实际上默认运行的只有一个.在grub启动界面多余的启动项和多余内核占用的存储空间迫使我产生了铲除多余内核的冲动. 最近,自己从 ...

  7. EF自动生成的（T4模板） 关联属性元数据修改

    为了实现 T4模板关联属性 不要序列化的问题 就是要在具体的 关联属性上面添加一个元数据 这里利用以前的 Newtonsoft.Json 这个框架为例 效果应该为 就是要在关联属性上面添加元数据  [ ...

  8. Android Learning：数据存储方案归纳与总结

    前言 最近在学习<第一行android代码>和<疯狂android讲义>,我的感触是Android应用的本质其实就是数据的处理,包括数据的接收,存储,处理以及显示,我想针对这几 ...

  9. PC和单片机通过MODBUS　RTU通信

    最近研究了一下MODBUS通信,在STC12C5A60S2单片机上实现了MODBUS协议的部分功能,方便上位机从单片机系统上获取数据,比如由单片机获取的温度.湿度.或者控制信号的状态等.有了MODBU ...

  10. Junit4 架构设计系列(1)： Request，ClassRequest 和 RunnerBuilder

    Overall Junit的成功已不言而喻,其广泛应用于单元测试,测试驱动开发领域.大量的工具,IDE都集成了JUnit,著名的有Maven,Ant,Eclipse,甚至像Google SDK提供的A ...