我有一個簡單的菜單，它當前正在使用我想要動畫的 CSS 網(wǎng)格。但是，grid-template-columns不能流暢地動畫。我現(xiàn)在正在做完全不同的菜單，但是在我尋找解決方案的過程中，我遇到了一些我無法弄清楚的事情。我的第一個想法是，雖然它可能根本不是一個好主意，并且可能不是關鍵幀動畫的合適替代方案，但我的第一個想法是在 while 循環(huán)中更新樣式以使項目的大小增加動畫。它不起作用。相關的JS：    $('#select-oak').hover(function () {            let start = new Date().getTime();            let elapsed = 0;            while (elapsed <= 1000) {                elapsed = new Date().getTime() - start;                let val = elapsed / 1000;                if (elapsed % 100 === 0) {                    $('.selector-block').css('grid-template-columns', `${1.0 + val}fr 1fr 1fr 1fr`);                    console.log(1 + val);                    console.log(elapsed);                }            }        }CSS：.selector-block {    position: relative;    overflow: hidden;    top: -32.5vh;    background-color: white;    gap: 5px;    width: 100vw;    height: 90vh;    display: grid;    grid-template-columns: 1fr 1fr 1fr 1fr;    clip-path: polygon(0 36%, 100% 0, 100% 60%, 0% 100%);    z-index: 3;}#select-oak {    position: relative;    overflow: hidden;    text-align: center;    background-color: rgb(94, 80, 21);    top: 21.5%;    width: 100%;    height: 200%;}#select-oak img {    position: relative;    left: -10vw;    transform: scale(1.06);    filter: blur(5px);}#select-oak img:hover {    filter: none;    transform: scale(1.1);    transition: ease-in-out 0.5s;}這似乎是一種非常規(guī)的方法，所以我對它不起作用并不感到驚訝，但由于我對 CSS、JS 和 JQuery 相對較新，我很好奇是什么阻止了它的工作，只是為了幫助我理解使用 JQuery 和 CSS。這是結(jié)果。如您所見，即使打印出正確的值，它也不會更新，直到循環(huán)中的最后一次傳遞。所以我有兩個問題：這是我的代碼有問題，還是您不能做的事情？如果可以更新這樣的樣式，這是一種不好的做法，為什么？