<!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. DevExpress 控件使用之XtraReport

    DevExpress 系列控件,相信大家做WinForm开发已经再熟悉不过了.报表工具对大家来说,选择面很广,.net 本身也提供了非常好的设计工具.下面主要介绍通过DevExpress XtraRe ...

  2. C#应用程序中读取Oracle数据库

    前言 最近的任务就是开发了一个功能,要从供应商那边读取数据,然后拿过来,处理以后放到我们自己的数据库中.供应商那边是Oracle数据库,其实不管什么数据我想都差不多,于是我就开始了.由于在家里写的博客 ...

  3. OC语言-02面向对象的三大特性

    01封装 #import <Foundation/Foundation.h> @interface Student : NSObject { //@public 成员变量尽量不使用 int ...

  4. 搭建Tornado+Nginx

    Tornado一个高效的异步非阻塞式的实时Web服务器,是Facebook旗下的 FriendFeed 网站开源Web服务器版本.但是它内置的HTTP服务器功能有限,不能在生产环境下使用. 在 Fri ...

  5. ios7新特性3-Map Kit新特性

    Map Kit 框架 (MapKit.framework) 包含了大量的改进以及为基于地图的程序提供了新特性.利用地图显示位置信息的应用现在可以使用Maps这个程序用到的3D地图,包括控制程序控制视线 ...

  6. Android程序的隐藏与退出

    转自Android程序的隐藏与退出 Android的程序无需刻意的去退出,当你一按下手机的back键的时候,系统会默认调用程序栈中最上层Activity的Destroy()方法来销毁当前Activit ...

  7. 与QString("我是中文")完全一样，你必须告诉tr这个窄字符串是何种编码？你不告诉它，它就用latin1。于是所谓的乱码问题就出来了。

    在论坛中漂,经常遇到有人遇到tr相关的问题.用tr的有两类人: (1)因为发现中文老出问题,然后搜索,发现很多人用tr,于是他也开始用tr (2)另一类人,确实是出于国际化的需要,将需要在界面上显示的 ...

  8. android Process.killProcess 和 System.exit(0) 区别

    1 Process.killProcess  和 System.exit(0) 两个都会 kill 掉当前进程. 你可以打开 DDMS 查看进程号,或 adb shell 进入 shell 然后 ps ...

  9. (转) Android的Window类

    Android的Window类 2011-03-25 10:02 by Keis, 110 visits, 网摘, 收藏, 编辑 Android的Window类(一)  Android的GUI层并不复 ...

  10. 【POJ】1451 T9

    DFS+字典树. #include <cstdio> #include <cstring> #include <cstdlib> typedef struct Tr ...