大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。

背景

我們公司的頁面上，有一個頁面有一個動畫效果，具體代碼我就不方便貼出來，我就拿一個小例子來大體展示一下這個簡單的動畫效果。

圖片

其實這個效果很好做，這不是問題的重點，我先貼出來這個動畫的代碼。

圖片

支持變大變小？

產品提出了一個需求，那就是這個球要支持變大變小，我心想，那還不簡單，搞兩個按鈕，點擊設置球的寬高不就行了？

圖片

但是我寫出來后發現一個問題，球的寬高變大變小，他的動畫出現了問題。

• 變大了，那么這個球會移動出父節點
• 變小了，那么這個球會到達不了父節點的邊界

圖片

其實問題很容易看出來，球的寬高變大變小了，但是動畫計算的移動距離一直是calc(100% - 100px)。

圖片

所以解決辦法就是，當球的大小變了的時候，這個100px也得跟著改成實時的球寬才行。

但是這個100px是寫在 keyframes 中啊，我要怎么去實時地去更改呢？JavaScript怎么才能跟class去聯動呢？

css變量

誒！可以用css變量去做呀！我可以在球的節點上設置一個樣式，這個樣式是一個css常量，當我修改球寬高時，順便也修改這個css常量，然后在 keyframes 中去使用這個css變量即可！

圖片

現在球的寬高再怎么變，它都能一直保持同樣的移動效果，不會達不到邊界也不會超出邊界了！！！

圖片