有没有一种简单的方法可以将可滚动的div从positionA动画化为positionB？

<style>
    #scrollableDiv {
        position: positionA;
        width: 200px;
        height: 200px;
        overflow-y: scroll;
        /* 其他样式属性 */
    }

    #scrollableDiv.animation {
        animation-name: scrollAnimation;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        /* 其他动画属性 */
    }

    @keyframes scrollAnimation {
        from {
            /* positionA的样式 */
        }
        to {
            /* positionB的样式 */
        }
    }
</style>

<div id="scrollableDiv">
    <!-- 可滚动的内容 -->
</div>

<script>
    // JavaScript代码，监听触发动画的事件，比如点击按钮
    var scrollableDiv = document.getElementById("scrollableDiv");
    scrollableDiv.addEventListener("click", function() {
        scrollableDiv.classList.add("animation");
    });
</script>