<!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. jquery 幻灯片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 调整ListBox控件的行间距及设置文本格式

    首先要将该控件的DrawMode属性为OwnerDrawVariable 添加DrawItem重绘事件:private void listBox1_DrawItem(object sender, Dr ...

  3. Cloudera Impala 之 ORDER BY without LIMIT currently not supported

    ERROR: NotImplementedException: ORDER BY without LIMIT currently not supported   impala中order by 需要l ...

  4. 浏览器阻止window.open的解决方案

    先分析一下浏览器为什么会阻止window.open吧:用户主动去触发事件的浏览器不会阻止,什么是用户主动触发的呢?就是当用户去点击的一瞬间就弹出这种浏览器是不会阻止的,如果是通过setTimeout定 ...

  5. directUI

    MFC界面开发中,习惯了使用控件,亦或者是自绘制控件来美化界面,但操作起来繁琐,还不太美观.DirectUI的出现,对于界面开发,给了我们一个新的选择,目前很多公司使用了该技术对其产品进行了美化,效果 ...

  6. 2016多校联合训练contest4 1012Bubble Sort

    Bubble Sort Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tota ...

  7. 推荐用于格式化以及高亮显示SQL文的PHP类-SqlFormatter

    有时候做开发用到SQL文的时候,由于sql文太长,很难真正看清楚这个sql文的结构. 所以需要一个工具能够自动对SQL文进行排版,在网上有幸找到这个用php写的类能处理这个任务. 原文地址是http: ...

  8. mvc4 to mvc5 and EF5 to EF6

    今天把 后台的mvc 升级到了mvc5和ef6 .出错很正常. 下面是一些错误信息. [A]System.Web.WebPages.Razor.Configuration.HostSection 无法 ...

  9. 全球顶级专家为你解读：什么是真正的 DevOps？

    [编者按]本文是 Skytap 内容主编 Noel Wurst 对 DevOps Enterprise Summit (DOES)的不完全综述,内容包括了 Noel 和一些与会嘉宾的思考,旨在勾画 D ...

  10. linux No manual entry for

    我的博客:www.while0.com 原来除了安装man,还要安装man-pages. yum install man -y yum install man-pages -y