效果图：

​​​​​​​

源码： 

<div style="height: 1500px;"></div>

<div class="software-box">
    <div class="software-container" style="display: flex;">
        <div class="software-left" style="background-color: pink;width: 50%;height: 200px;">

        </div>
        <div class="software-right" style="background-color: skyblue;width: 50%;height: 200px;">

        </div>
    </div>
</div>
<style>
    /* donghua */
    .software-left,
    .software-right {
        opacity: 0;
        transform: translateX(-100%);
        /* 左边的模块初始位置在屏幕左侧外 */
        transition: transform 1s ease, opacity 1s ease;
    }

    .software-right {
        transform: translateX(100%);
        /* 右边的模块初始位置在屏幕右侧外 */
    }

    .software-box.in-view .software-left {
        transform: translateX(0);
        opacity: 1;
    }

    .software-box.in-view .software-right {
        transform: translateX(0);
        opacity: 1;
    }
</style>
<script>
    // 开门动画
    document.addEventListener('DOMContentLoaded', function () {
        const softwarebox = document.querySelector('.software-box');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    softwarebox.classList.add('in-view');
                } else {
                    softwarebox.classList.remove('in-view');
                }
            });
        }, {
            threshold: 0.5  // 当模块的50%出现在视口中时触发
        });

        observer.observe(softwarebox);
    });
</script>