true life

參考https://www.openfoundry.org/tw/tech-column/9233-css3-animation

主要兩個 CSS3 在動畫的屬性： Transition 與 Animation

Transition 實際練習:

.class{

width:150px;

height:150px;

background: #000;

}

.class:hover{

width:250px;

height:250px;

transition: all 1s;

} 

基本上來說，當我hover class這個class時，寬高本來是150px*150px，hover之後會變成250px*250px,行程是1S,

至於transition的屬性細節這裡就不特別說明! 也可配合JQ或JS達成一些效果，例如click事件或hover事件時，可以

對一個class  addClass或者是toggleClass...不過transition有些缺點，他的開始和結束必須都是具體數字，若不是具體數字

，則transition就無作用了；

這時就會用到css3的動畫Animation，這邊先列出基本的範例!

.test_class{

    width:100px;

   height:100px;

    background:#000;

   animation: 1s colorChange;     //要指定動畫秒數跟名稱

}

 @keyframes colorChange{

0%{background:#000;}

50%{background:#fff;}

100%{background:#000;}

}

以這個範例來看，整個做動會在1秒完成，過程中從黑色色塊變成白色色塊，最後再變成黑色色塊，

這邊一樣先不提的太細，先求會使用，之後再想想能做什麼案例!