css3 transition

<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>
posted @ 2016-12-06 23:37  guoyongfeng  阅读(148)  评论(0)    收藏  举报