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

可以通过多种方式完成。 Example

在示例中，我使用包装元素和放置行元素。这样，line元素可以使用与包装元素相关的百分比值。这意味着我们不需要修复高度或宽度，只需让它按图像生长即可。

<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>

现在动画将是

@keyframes show-up {
  0% {
    height: 0;
  }

  50% {
    left: 0;
    height: 100%;
  }

  100% {
    left: 100%;
    height: 100%;
  }
}

Answer 2

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

并使用：在元素

之后检查第二种方式

    #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>