CODEWITHSUNDEEP
htmlcssanimation
Nagarjuna Reddy
Nagarjuna Reddy

Reputation: 4195

CSS animation draw vertical line then turn to left

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>

Upvotes: 0

Views: 3785

Answers (2)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

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>

Upvotes: 1

User 28
User 28

Reputation: 5158

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%;
  }
}

Upvotes: 0

Related Questions