<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. Sort using in VS

  2. 备份Mysql数据库BAT脚本

    @echo off set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%"c:cd C:\MySQL\bin\mysqldump -h 172.25. ...

  3. java中文文档官方下载

    一直在寻找它,今天无意之间终于发现它了! http://download.oracle.com/technetwork/java/javase/6/docs/zh/api/overview-summa ...

  4. 个人作业——关于K米的产品案例分析

    Notice:本文所采用的K米版本为 Version:4.3.0 Release:20161014 第一部分 调研,评测 评测: 软件的bug,功能评测,黑箱测试 1.下载并使用,描述最简单直观的个人 ...

  5. Ubuntu 14.04.1 建立 Android M, Android N 開發環境 與 問題

    # Modify /etc/apt/sources.list# add below 3 lines to /etc/apt/sources.listdeb http://archive.ubuntu. ...

  6. Flymeos插桩适配教程

    插桩适配前提,安装Ubuntu或者其他linux系统. 安装JDK7 sudo apt--jdk Ubuntu 16.04与基于它的版本,需要添加源 sudo add-apt-repository p ...

  7. Deepin 15.3 编译同步SudaMod 2.0

    1.设置hosts,方便访问国外站点 $ wget https://raw.githubusercontent.com/racaljk/hosts/master/hosts -qO /tmp/host ...

  8. 经典KMP算法C++与Java实现代码

    前言: KMP算法是一种字符串匹配算法,由Knuth,Morris和Pratt同时发现(简称KMP算法).KMP算法的关键是利用匹配失败后的信息,尽量减少模式串与主串的匹配次数以达到快速匹配的目的.比 ...

  9. mui，css3 querySelector，appendChild，style.display，insertBefore

    <script> mui.init({ swipeBack:true //启用右滑关闭功能 }); window.addEventListener('toggle', function(e ...

  10. 配置springMVC之后,引入js,css等资源处理

    配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...