[CSS3] Transition Function

Reference: Click Here

---

---

(1) Transition

   平滑过渡的效果， 部分的解决Flash问题

   transition：属性 时间 函数 延迟时间
      执行变换的属性：transition-property
      变换延续的时间：transition-duration
      动画函数：transition-timing-function
      变换延迟时间：transition-delay


 transition-timing-function:
      ease 变慢
      linear 恒速
      ease-in 加速 渐显效果
      ease-out 减速 渐隐效果
      ease-in-out 先加速 后减速

---

Example:

<div>Click Me!</div>

div{
  position: relative;
  width:100px;
  height:100px;

  border:2px solid orange;
  color:green;
  background:rgba(200,220,001,0.4);
  -webkit-transition-property:background border color font-weight;
  -webkit-transition-duration:2s;
  -webkit-transition-timing-function:linear;
}
div:hover{
  background:red;
  color:black;
  border:1px dotted green;
  font-weight:bold;
  -webkit-transform:translate(20px,0);
}

---

(2) 多个CSS3过渡效果

div{
  position: relative;
  width:100px;
  height:100px;

  color:green;
  background:rgba(200,220,001,0.4);
  /****************/
  /*transition:background 3s linear 1s*/
  /****************/
  -webkit-transition:background 3s linear 1s, color 1s ease-in 1s,-webkit-transform 2s linear 1s;
  /****************/
}
div:hover{
  background:red;
  color:black;
  -webkit-transform:translate(200px,0);
}