<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. go 数据类型转换

    使用strconv 包 首先需要import strconv包 //string to int i,err := strconv.Atoi(str) // string to int64 i64,er ...

  2. go 数组(array)、切片(slice)、map、结构体(struct)

    一 数组(array) go语言中的数组是固定长度的.使用前必须指定数组长度. go语言中数组是值类型.如果将数组赋值给另一个数组或者方法中参数使用都是复制一份,方法中使用可以使用指针传递地址. 声明 ...

  3. 【JavaScript】[bind，call，apply] (function cal(){}());声明函数立即执行

    ---恢复内容开始--- 1.js 里函数调用有 4 种模式:方法调用.正常函数调用.构造器函数调用.apply/call 调用.同时,无论哪种函数调用除了你声明时定义的形参外,还会自动添加 2 个形 ...

  4. JDK小Bug汇总

    Java官方的Logger.getGlobal().info无效 无效代码 Logger.getGlobal().info("start"); 解决方案(三选一): Logger. ...

  5. js 时间操作和随机数操作

    function Data() { var date = new Date(); var year = date.getFullYear(); ; var strDate = date.getDate ...

  6. Java实现的二分查找算法

    二分查找又称折半查找,它是一种效率较高的查找方法. 折半查找的算法思想是将数列按有序化(递增或递减)排列,查找过程中采用跳跃式方式查找,即先以有序数列的中点位置为比较对象,如果要找的元素值小 于该中点 ...

  7. iOS 8 Extensions

       本文由海水的味道收集整理,欢迎转载    当前版本 0.0.1  iOS 8 Extensions 一.扩展概述 扩展(Extension)是iOS 8中引入的一个非常重要的新特性.扩展让app ...

  8. ionic 界面数据缓存问题

    在ionic开发过程中列表到详情,在返回是可能存在,列表重新加载问题,不能回到用户上次点击的地方 在处理前期各种坑,把详情设置为弹出层,缓存数据等等,然而会出现各种问题,无意间发现一篇文章,一个属性解 ...

  9. JS复习--更新结束

    js复习-01---03 一 JS简介 1,文档对象模型 2,浏览器对象模型 二 在HTML中使用JS 1,在html中使用<script></script>标签 2,引入外部 ...

  10. jQuery插件之Cookie插件使用方法~

    一.介绍 1-1.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件.下载地址:jQuery-cookie.js  有需要的朋友,右键另存为即可! 二.使用方法 2-1.引入jQu ...