<html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
   
  .trans1{
  -webkit-transition:0.5s ease;
  -moz-transition:0.5s ease;
  -webkit-transition-property:all;
  -moz-transition-property:all;
  position:absolute;
  left:10px;
  top:50px;
  height:100px;
  width:100px;
  background:#ef4900;
  color:white;
  }
  .trans2{
  -webkit-transition:0.5s ease-in-out;
  -moz-transition:0.5s ease-in-out;
  -webkit-transition-property:width;
  -moz-transition-property:width;
  position:absolute;
  left:350px;
  top:50px;
  height:100px;
  width:100px;
  background:blue;
  color:yellow;
  }
  .trans3{
  -webkit-transition:0.5s ease;
  -moz-transition:0.5s ease;
  -webkit-transition-property:height;
  -moz-transition-property:height;
  width:100px;
  height:100px;
  background:green;
  color:#ccc;
  position:absolute;
  left:780px;
  top:50px;
   
  }
  .trans1:hover{
  width:300px;
  height:300px;
  }
  .trans2:hover{
  width:300px;
  }
  .trans3:hover{
  height:300px;
  }
  </style>
  </head>
  <body>
  <div class="trans1">变换所有s属性</div>
  <div class="trans2">变换宽度属性</div>
  <div class="trans3">变换高度属性</div>
  <!-- transform呈现是一种变形结果，而transition呈现是一种过渡，通俗一点就是一种动画转化过程，如渐显，减弱、动画快慢等，transform，和transition是两种不同动画模型；
  1、transition的过渡属性：
  transition属性是一个间歇属性，用于设置四个过渡属性；
  语法
  transition：property duration timing-function delay；
  值描述transition-property规定设置过渡效果的css属性名称。
  transition-duration规定完成过渡效果需要的时间秒，或毫秒；
  transition-timing-function规定速度效果的速度曲线。
  transition-delay定义过渡效果何时开始
  transition-property；
  值：
  all：显示指对所有元素；
  none:表示没有元素；
  ident:制定css属性列表；
  注：请始终设置transition-duration属性，否则时长为0；就不会产生过渡效果，transform与transition此时效果一样
  transition：过渡属性名称 过渡时间 过度模式 ；
  transition-timing-function的五种值；
  1：ease逐渐变慢；
  2：liner：匀速；
  3：ease-in:缓慢开始（加速）；
  4：ease-out：缓慢结束（减速）；
  5：ease-in-out：缓慢开始，缓慢结束（先加速，或减速）；
  6：cubic-bezier 贝赛尔曲线（mathewlein.com/easer）;-->
  </body>
 

</html>

css3 transition的更多相关文章

  1. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  2. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  3. 【转】CSS3 transition规范的实际使用经验

    原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...

  4. CSS3 transition规范的实际使用经验

    本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...

  5. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  6. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...

  7. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  8. css3 transition动画

    CSS3: 一.transition: <property> <duration> <animation type> <delay> eg: .div{ ...

  9. css3 transition effect(其它效果)

    http://blog.csdn.net/jerryvon/article/details/8755548 整理了一些其它动画,用的模板为flip模板,只不过CSS3不同 /************* ...

  10. 制作动画平滑过渡效果：《CSS3 Transition》

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

随机推荐

  1. Jquery揭秘系列：实现 ready和bind事件

    讲这一节之前,先回顾之前的一篇<小谈Jquery>里面的代码: (function (win) { var _$ = function (selector, context) { retu ...

  2. 面向对象和面向过程的jquery版选项卡

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

  3. [HTTP Protocol] 200 OK (from cache)和304 Not Modified

    含义 200 OK (from cache)直接从缓存中获取的内容并未请求服务器 304 Not Modified 请求服务器并和服务器比较 If-Modified-Since,若文件未改变,服务器返 ...

  4. Advanced Office Password Recovery安装后显示是英文版的

    一些才开始接触Advanced Office Password Recovery(即AOPR)的朋友,在安装Advanced Office Password Recovery的时候可能发现Advanc ...

  5. 【bzoj4517】 Sdoi2016—排列计数

    http://www.lydsy.com/JudgeOnline/problem.php?id=4517 (题目链接) 题意 求n个数中正好m个数位置不变的排列数. Solution $${错排公式: ...

  6. Beta阶段第一次Scrum Meeting

    情况简述 BETA阶段第一次Scrum Meeting 敏捷开发起始时间 2016/12/4 14:00 敏捷开发终止时间 2016/12/5 00:00 会议基本内容摘要 确定了第一次组团开发的目标 ...

  7. js字符串方法

    字符串方法根据下标返回字符:str.charAt()//传入一个下标返回字符str.charCodeAt();// 传入一个下标获取编码String.formCharCode();//接受编码,编码转 ...

  8. Socket异步通讯

    1.可以通过多线程来解决(一会补上) 2.Socket在tcp/udp两种通信协议下的异步通信: 基于TCP的异步通信: BeginAccept方法和endeaccept方法 包含在System.Ne ...

  9. windows下pip安装python模块时报错总结

    http://www.cnblogs.com/liaojiafa/p/5100550.html 前言: 这几天把python版本升级后,发现pip安装模块好多都报错(暂不确定是不是因为升级导致的),我 ...

  10. 全文搜索 Lucene.Net

    Lucene简介 首先说明的是--Lucene.Net只是一个全文检索开发包,不是一个成型的搜索引擎, 它的功能就是负责将文本数据按照某种分词算法进行切词,分词后的结果存储在索引库中,从索引库检索数据 ...