Instead of using your images, I'm incorporating dogs as placeholders for this demonstration. The objective here is to have an adult dog move from left to right on the screen, while a puppy remains hidden. As the adult dog reaches the middle of the screen, it should disappear, and the puppy should appear smoothly. It's important to note that the display property is not animatable in CSS, so you'll need to animate the opacity instead.
img {
width: 150px;
height: 150px;
}
[class ^="image"] {
width: 150px;
height: 150px;
display: block;
position: absolute;
left: 0;
right: 0;
background-size: contain;
}
.image1 {
z-index: 2;
animation: daAnimation1 19s linear infinite;
}
.image2 {
z-index: 1;
margin: auto;
left: 0;
right: 0;
opacity: 0;
animation: daAnimation2 19s linear infinite;
}
@keyframes daAnimation1 {
0% {
left: -150px;
opacity: 1;
}
45% {
left: calc(50vw - 75px);
opacity: 1;
}
50% {
left: calc(50vw - 75px);
opacity: 0;
}
100% {
left: 110%;
opacity: 0;
}
}
@keyframes daAnimation2 {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="outer">
<div class="image1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="adult dog"></div>
<div class="image2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" alt="puppy"></div>
</div>
I trust this explanation clarifies your query.
UPDATE: This response pertains to @Danish's comment (refer below)
img {
width: 150px;
height: 150px;
}
[class ^="image"] {
position:absolute;
background-size: contain;
}
.image1 {
z-index: 2;
opacity: 1;
animation: daAnimation1 19s linear infinite;
}
.image2 {
z-index: 1;
opacity: 1;
}
.outer{
width: 150px;
height: 150px;
display: block;
position: absolute;
animation: OuterAnimation 19s linear infinite;
}
@keyframes OuterAnimation{
0% {
left: -150px;
}
100% {
left: 110%;
}
}
@keyframes daAnimation1 {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="outer">
<div class="image1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="adult dog"></div>
<div class="image2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" alt="puppy"></div>
</div>