JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left_image1"></div>
<div id="right_image1"></div>

CSS

/* CSS */
#left_image1 { display: none; position: fixed; width: 50%; height: 100%; left: 0; margin-left: 0; background: #F00 url(/images/1.jpg) } 
#right_image1 { display: none; position: fixed; width: 50%; height: 100%; left: 0; margin-left: 50%; background: #00F url(/images/2.jpg) }

JavaScript

$(function() {
    $('#right_image1').delay(1000).fadeIn(500).delay(5000).animate({
        marginLeft: '100%'
    });
    $('#left_image1').delay(1000).fadeIn(500).delay(5000).animate({
        marginLeft: '-50%'
    });
});