<!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 text--val--html

    .html()用为读取和修改元素的HTML标签    对应js中的innerHTML .html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一 ...

  2. java 优化

    代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用,但是, ...

  3. ng-form

    form提供的属性都是用来表示表单的验证状态的,包括:$pristine(表单没有填写记录).$dirty(表单有填写记录).$valid(通过验证).$invalid(未通过验证).$error(验 ...

  4. ASP.NET MVC轻教程 Step By Step 12——客户端验证

    前面两节使用的两种数据验证方法都是在服务器端进行的,也就是提交了表单,数据回传给服务器才能验证.这样会带来两个问题,一是用户体验不好,用户提交了表单之后才知道存在问题:二是会给服务器带来额外的压力.我 ...

  5. 4537: [Hnoi2016]最小公倍数

    Description 给定一张N个顶点M条边的无向图(顶点编号为1,2,…,n),每条边上带有权值.所有权值都可以分解成2^a*3^b的形式.现在有q个询问,每次询问给定四个参数u.v.a和b,请你 ...

  6. java入门（与C++的不同之处）封装篇

    初学java,总是想将它与之前的C++做比较,看了慕客网的java入门视频,一直觉得在面向对象方面,它和C++有太多相同的地方,结果今天学到了两点不同之处,现在将它记录下来: 1.  java的访问修 ...

  7. mvc验证码

    public string CreateValidateCode(int length) { int[] randMembers = new int[length]; int[] validateNu ...

  8. ARC - MRC

    1. 选择工程 ---> build phases  --> .m中添加 -fno-objc-arc

  9. Kernel Bypass & Offload 介绍

    系统网络优化可以有两方面的工作可以做:1 绕开内核(bypass):2 用硬件替代软件(offload). 具体包括: 1. 绕开内核: 不使用内核内核子系统的功能,采用自己实现的相同功能的代码来处理 ...

  10. UFLDL教程（六）之栈式自编码器

    第0步:初始化一些参数和常数   第1步:利用训练样本集训练第一个稀疏编码器   第2步:利用训练样本集训练第二个稀疏编码器   第3步:利用第二个稀疏编码器提取到的特征训练softmax回归模型   ...