<!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. Windows phone 之Xml操作

    最近在做天气预报应用,这个应用中需要用到Xml来存储关注的城市列表,保存一下代码,方便以后使用,也给博友们一个参考: 其中:添加关注城市的操作代码是: 其实就是, (1)先把数据从CareCityCo ...

  2. js事件冒泡原理及处理

    事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”:执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动 ...

  3. 在oj平台上练习的一些总结【转】

    程序书写过程中的一些小技巧:1. freopen(“1.txt”,”r”,stdin); //程序运行后系统自动输入此文档里面的内容(不需要进行手动输入)freopen(“1.txt”,”w”,std ...

  4. C# Dispose Finalize

    比较值得参考的文档:http://www.jb51.net/article/37214.htm. .NET 的内存管理过程: 托管堆假设内存无限大,线性连续分配内存: 实际内存不够使用时,遍历托管堆对 ...

  5. c/c++的函数参数压栈顺序

    整理日:2015年3月18日 为了这句话丢了很多次人.无所谓了,反正咱脸皮厚. 总结一下 编译出来的c/c++程序的参数压栈顺序只和编译器相关! 下面列举了一些常见的编译器的调用约定 VC6 调用约定 ...

  6. c printf

    printf的格式控制的完整格式:% - 0 m.n l或h 格式字符下面对组成格式说明的各项加以说明:①%:表示格式说明的起始符号,不可缺少.②-:有-表示左对齐输出,如省略表示右对齐输出.③0:有 ...

  7. .froxlor 玩起

    其实,细想想, 这方面很有操作余地的哟.

  8. JSP页面间传递参数的5种方法

    JSP页面间传递参数是经常需要使用到的功能,有时还需要多个JSP页面间传递参数.下面介绍一下实现的方法. (1)直接在URL请求后添加 如:< a href="thexuan.jsp? ...

  9. 初级Oracle和SQL学习者的学习笔记。韩顺平-玩转oracle。

    我自己就是一个oracle和sql的初学者,前段时间看了韩顺平老师的oracle视频教程,觉得很深入浅出,收获了很多.同时自己也做了不少笔记,现在想将纸质笔记以自己的话总结出来.俗话说得好:教学总是相 ...

  10. QT5.1.1中MinGW4.8的环境变量配置

    1.右击“我的电脑”图标,在弹出的菜单上选择“属性(R)”菜单项. 2.选择“高级”选项卡.点击“环境变量”按钮. 3.点击“新建(W)”按钮,新建环境变量:MINGW_HOME,变量值为MinGW的 ...