什麼是transition過渡

transition 指過場動畫

-webkit-/ -moz-/ -o-/ -ms-

限制

1. 開始和結束必須有具體的數值
2. 必須由事件觸發動作,無法進頁面就有效果
   • JS
   • 偽類::hover、::focus
   • jQuery

.box

.box {
  width: 200px;
  height: 200px;
  color:#000;
  border: 1px solid green;
  background-color: white;

  transition-property: background-color, color, margin-left;

  transition-property: all;

  transition-duration: 1s;                 /*指定過渡時間1秒*/

  transition-timing-function: ease;        /*快到慢*/

  transition-timing-function: linear;      /*線性恆速*/

  transition-timing-function: ease-in;     /*慢到快的加速狀態*/

  transition-timing-function: ease-out;    /*愈來愈慢減速狀態*/

  transition-timing-function: ease-in-out; /*先加速,後減速*/

  transition-timing-function: cubic-bezier(0.25, 0.65, 0.88, 0.25);

  transition-timing-function: steps(5, start);/*跳耀式過渡*/ 

  transition-delay: 0s, 2s, 0s;

  /*全部過渡型式*/
  transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
  /*簡寫過渡型式*/
  transition:  all  1s  ease-in  0s;
}

.box:hover

.box1:hover {
    background-color: black;
    color: white;
    margin-left: 100px;
}