CSS 狀態改變動畫

之前寫了一篇 [CSS 動畫](https://yhtpnotes.blogspot.com/2020/05/css.html) 時，忘了應該先寫這個狀態變化的動畫，大部份的應用都是用在滑鼠移到上面時的用動畫方式改變狀態，實際上，這個功能對於所有狀態變化都可以變成動畫 參數說明： ``` transition [動畫持續時間] [delay 多久開始] [timing-function] transition-delay [delay 多久開始] transition-duration [動畫持續時間] transition-property [指定改變的屬性] transition-timing-function [動畫 timing] ``` 我個人偏好不使用 transition-property ，這樣可以更自由的使用這個功能 首先先來一個最簡單的範例: 在 **#a11181_div:hover** 裡頭加了 **transition: 1s** 後 ，滑鼠移過去時，顏色會慢慢的變成黃色，同時長度從 100px 慢慢變成 200px， 當滑鼠移開時，因為在 **#a11181_div** 加上了 **transition: 0.2s;** ，會以動畫方式很快的恢復原狀，如果沒有加上 **transition** ，狀態會瞬間改變，不會有動畫效果，另外還有加上 **transition-delay** , 所以會等 0.5 秒後才開始動畫 而下面的 [SET] 和 [UNSET] 是利用 javascript 去做設定，結果一樣會以動畫顯示, 當用 javascript 設定時，是直接寫在元件上，所以 hover 改變 width 就沒作用了，而 [CSS SET] 和 [CSS UNSET] 的是直接修改本來的 CSS 設定，所以不影響 hover 。 ``` $mmcode(r1) ``` <div class="mmresult r1"> <style id="a11181_css"> #a11181_div { width: 100px; height: 100px; background-color:#f00; transition: 0.2s; transition-delay:0.5s; transition-timing-function: linear; } #a11181_div:hover { background-color:#ff0; width:200px; transition: 1s cubic-bezier(0.6, -0.6, 0.1, 1.6); } #a11181_set button { font-size:1em; } </style> <div id="a11181_div"> </div> <br> <div id="a11181_set"> <button id="a11181_bb">SET</button> <button id="a11181_bb1">UNSET</button> <button id="a11181_bb2">CSS SET</button> <button id="a11181_bb3">CSS UNSET</button> </div> <script> $("#a11181_bb").on("click",function() { $("#a11181_div").css("width","300px"); }); $("#a11181_bb1").on("click",function() { $("#a11181_div").css("width",""); }); $("#a11181_bb2").on("click",function() { var rc=cssjson("#a11181_css"); rc.set("#a11181_div", { width:"300px" }); }); $("#a11181_bb3").on("click",function() { var rc=cssjson("#a11181_css"); rc.set("#a11181_div", { width:"100px" }); }); </script> </div> <script src="https://yiharng.github.io/cssjson.min.js"></script> <hr>