Animation and change of two different images - html

Question

There are two images, first is the boat, second the plane. The desired result is: Boat animates from left to right, at that time the plane is hidden. When the boat reaches the middle of the screen it disappears and the plane appears. This change should happen smoothly.
.image1 {
width: 259px;
height: 259px;
display: block;
position: absolute;
bottom: 135px;
margin: auto;
#include transition(all 1.2s);
background-size: contain;
-webkit-animation: helicopter-move-one 19s linear infinite;
animation: helicopter-move-one 19s linear infinite;
opacity: 1;
}
#-webkit-keyframes helicopter-move-one {
0% {
left: -300px;
}
60% {
opacity: 0;
}
100% {
left: 110%;
}
}
#keyframes helicopter-move-one {
0% {
left: -300px;
display: block;
}
59% {
display: none;
}
60% {
display: none;
}
100% {
left: 110%;
}
}
<div class="outer">
<div class="image1"><img src="" alt="boat"></div>
<div class="image2"><img src="" alt="plane"></div>
</div>

Answer 1

Since I don't have your images I'm using dogs. In this case "The desired result is: adult dog animates from left to right, at that time the puppy is hidden. When adult dog reaches the middle of the screen it disappears and the puppy appears. This change should happen smoothly." Please note that display is not animatable. You 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 hope this answers your question.
UPDATE:this is an answer to #Danish comment (see 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>