change the height of a vertical line according to the bounce height of a circle

Question

I want to:

1. Align the circle (containing exclamation mark) with the dashed vertical line.
2. Make the circle bounce along the vertical line while changing the height of the dashed vertical line accordingly.

Can you please tell me how can I achieve that in CSS? thank in advance.

   .pin{
  display:inline-block;
  align-contents: center;
}
.circle {
  color: #ffffff;
  background: #ff5500;

  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  display: inline-block;
  animation: blinkingBackground 1s infinite;
}
@keyframes blinkingBackground {
  0% {
opacity: 0;
transform: translateY(-10px);
  }
  25% {
opacity: 0.025;
transform: translateY(10px);
  }
  50% {
opacity: 0.05;
transform: translateY(-10px);
  }
  75% {
opacity: 0.075;
transform: translateY(10px);
  }
  100% {
opacity: 1;
  }
}

.vline{
border-left: 1px dashed orangered;
height: 50px;
position: relative;
}

<div class="pin">
    <div class="circle">
     ! 
    </div>
    <div class="vline"></div> 
</div>

Answer 1

#1 Align circle with line
For your .vline class add those two properties. Width in order to have the one pixel width from your border. And margin: 0 auto will center your div inside the parent div.

width: 1px;
margin: 0 auto;

#2 Reduce height while bouncing
Just add another animation to your .vline class. In the example below I also changed the height from 50px to 0, that's keeping the .vline at zero pixels after animation is done. And instead I'm setting at keyframe 0% the height to 50px.

Depending on how many pixels you want to reduce it, you will need more keyframes. In the example I've reduced the height by 10px per second, so I have 5 keyframes with 10px steps.

@keyframes reduceHeight {
  0% {
    height: 50px;
  }
  20% {
    height: 40px;
  }
  40% {
    height: 30px;
  }
  60% {
    height: 20px;
  }
  80% {
    height: 10px;
  }
  100% {
    height: 0px;
  }
}

And here the working example

.pin{
  display:inline-block;
  align-contents: center;
}
.circle {
  color: #ffffff;
  background: #ff5500;

  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  display: inline-block;
  animation: blinkingBackground 1s infinite;
}

.vline{
  width: 1px;
  margin: 0 auto;
  border-left: 1px dashed orangered;
  height: 0;
  position: relative;
  animation: reduceHeight 5s;
}

@keyframes blinkingBackground {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  25% {
    opacity: 0.025;
    transform: translateY(10px);
  }
  50% {
    opacity: 0.05;
    transform: translateY(-10px);
  }
  75% {
    opacity: 0.075;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes reduceHeight {
  0% {
    height: 50px;
  }
  20% {
    height: 40px;
  }
  40% {
    height: 30px;
  }
  60% {
    height: 20px;
  }
  80% {
    height: 10px;
  }
  100% {
    height: 0px;
  }
}

<div class="pin">
    <div class="circle">
     ! 
    </div>
    <div class="vline"></div> 
</div>

It's not perfect yet and you'll have to play around with positionings (maybe even have to add them to the animations), depending on what exactly you wanna acchieve. But it should give you a general idea and ONE possibility on how to do it. There might be different methods to do the same.