html - CSS动画绘制垂直线然后向左转

Question

我正在玩 CSS 动画，我想知道是否有办法让垂直线(具有一定高度)自动增加长度并向左转并在页面加载时在末尾添加图像.我能够绘制垂直线，但如何将其向左转并添加图像。

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

通过使用div内部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>

并使用 :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>