设置矩形动画，使其向上/向下移动

<style>
    .rectangle {
        position: absolute;
        width: 100px;
        height: 50px;
        background-color: blue;
        top: 0; /* 初始位置为页面顶部 */
        left: 50%; /* 居中位置 */
        transform: translateX(-50%); /* 水平居中 */
    }
</style>

<script>
    var rectangle = document.querySelector('.rectangle');
    var direction = 'up'; // 初始方向为向上移动

    function animateRectangle() {
        if (direction === 'up') {
            rectangle.style.transform = 'translateY(-100px)';
            direction = 'down';
        } else {
            rectangle.style.transform = 'translateY(0)';
            direction = 'up';
        }
    }

    setInterval(animateRectangle, 2000); // 每2秒触发一次动画
</script>