문열리는듯한 효과

HTML

<div id="loader-wrapper">
    <div id="loader"></div>
                
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>

CSS

<style>
.loaded #loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
</style>

<script>
 $(document).ready(function () {

        // Fakes the loading setting a timeout
        setTimeout(function () {
            $('body').addClass('loaded');
        }, 400);
});
</script>