Fade in, then slide to left, then fade in another image

Those specification are not very large 50px x 50px. Example below you can play around with. Its not very responsive either.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>Animation</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.holder {

position: relative;

width: 500px;

height: 50px;

}

img {

max-width: 100%;

height: auto;

}

.box_1 {

width: 50px;

height: 50px;

margin: 0 225px;

position: absolute;

animation-name: slideimage;

animation-delay: 3s;

animation-duration: 2s;

animation-iteration-count: 1;

animation-fill-mode: forwards;

}

.box_2 {

width: 448px;

position: absolute;

right: 0;

animation-delay: 12s;

}

.img_1 {

animation-duration: 4s;

animation-name: fadeIn;

display: block;

height: 50px;

}

.img_2 {

animation-duration: 10s;

animation-name: fadeIn2;

background-color: plum;

height: 50px;

}

@keyframes fadeIn {

0% {  opacity: 0;  }

100% {  opacity: 1;  }

}

@keyframes slideimage {

0%   {right:0; top:0;}

100%  {right:225px; top:0;}

}

@keyframes fadeIn2 {

0% {  opacity: 0;  }

50% {  opacity: 0;  }

100% {  opacity: 1;}

}

</style>

</head>

<body>

<div class="holder">

<div class="box_1"><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196982.jpg" class="img_1" />

</div>

<!-- end box_1 -->

<div class="box_2">

<div class="img_2">

<img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196982.jpg" style="height: 50px;" />

</div>

</div>

<!-- end box_2 -->

</div>

<!-- end holder -->

</body>

</html>