CSS animation draw vertical line then turn to left - html

Question

I'm playing around with CSS animation, and I was wondering if there's a way to make a vertical line (with certain height) to grow in length automatically and turn to left and add an image at the end when the page loads. I was able to draw vertical line but how to turn it to left and add image.
https://jsfiddle.net/29303g27/3/
#cool
{
width:2px;
margin-left:10%;
background-color:#431;
margin-top:35%;
animation:grow 3s forwards;
position:relative;
}
#keyframes grow
{
0% {
height: 0px;
bottom:0;
}
100%{
height: 200px;
bottom:200px;
}
}
<div id=cool>
</div>

Answer 1

By using div inner div
#cool2{
height:0px;
width:1px;
border-bottom:2px solid #000;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
margin-left:10%;
margin-top:0px;
animation-delay:5s;
-webkit-animation-delay:3s;
}
#keyframes increase {
100% {
width: 200px;
}
}
.image
{
width:0px;
height:200px;
left:2px;
top:2px;
-webkit-animation: fade 3s;
-moz-animation: fade 3s;
-o-animation: fade 3s;
animation: fade 3s;
animation-fill-mode: forwards;
margin-left:10%;
margin-top:0px;
animation-delay:6s;
-webkit-animation-delay:6s;
position:absolute;}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
width:200px;
}
}
#cool
{
width:2px;
margin-left:10%;
background-color:#431;
margin-top:35%;
animation:grow 3s forwards;
position:relative;
}
#keyframes grow
{
0% {
height: 0px;
bottom:0;
}
100%{
height: 200px;
bottom:200px;
}
}
<div id=cool>
<div id=cool2>
<img class='image' src='https://www.google.co.in/logos/doodles/2017/sitara-devis-97th-birthday-6469056130449408.5-l.png'>
</div>
</div>
and Check this 2nd way using :after Element
#cool:after{
height:0px;
width:1px;
border-bottom:2px solid #000;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
margin-left:10%;
margin-top:0px;
animation-delay:5s;
-webkit-animation-delay:3s;
position:absolute;
content:'';
}
#keyframes increase {
100% {
width: 200px;
}
}
.image
{
width:0px;
height:200px;
left:2px;
top:2px;
-webkit-animation: fade 3s;
-moz-animation: fade 3s;
-o-animation: fade 3s;
animation: fade 3s;
animation-fill-mode: forwards;
margin-left:10%;
margin-top:0px;
animation-delay:6s;
-webkit-animation-delay:6s;
position:absolute;}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
width:200px;
}
}
#cool
{
width:2px;
margin-left:10%;
background-color:#431;
margin-top:35%;
animation:grow 3s forwards;
position:relative;
}
#keyframes grow
{
0% {
height: 0px;
bottom:0;
}
100%{
height: 200px;
bottom:200px;
}
}
<div id=cool>
<img class='image' src='https://www.google.co.in/logos/doodles/2017/sitara-devis-97th-birthday-6469056130449408.5-l.png'>
</div>

Answer 2

It can be done in many ways. Example
In example I use wrapper element and place line element inside. In this way, line element can use percentage value which relate to wrapper element. It means we don't need to fix height or width just let it grows by image.
<div class='wrapper'>
<img class='image' src='https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?auto=format&fit=crop&w=360&h=180&q=60'>
<div class='line'></div>
</div>
and now animation will be
#keyframes show-up {
0% {
height: 0;
}
50% {
left: 0;
height: 100%;
}
100% {
left: 100%;
height: 100%;
}
}