Space between dots and animate from top to bottom

Question

I have created a box where I have text, vertical dotted lines and icon below.

I am trying to create like the following image

This is what I have created, in my code, the dotted lines very close to each other because I have used border, but not sure what other way to create dots, and animation I am looking is, dots appear one by one.

.lets-experience {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 25px;
	max-width: 150px;
	text-align: center;
	color: #fff;
	font-family: 'Gotham-Book';
	font-size: 14px;
  background:#404040;
}
.lets-experience > p {
	margin: 5px 0;
}
.lets-experience > .dots {
	width: 1px;
	height: 50px;
	margin: 0 auto 0 auto;
	border-right: 1px dotted #fff;
}
.experience-arrow {
	width: 2em;
	height: 2em;
	transform: rotate(90deg);
	margin: -10px -2px 0 0;
}
.experience-arrow > path {
	fill: #fff;
}

<div class="lets-experience">
  <p>Lets Experience</p>
  <div class="dots"> </div>
  <svg class="experience-arrow" viewBox="0 0 20 20">
  	<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
  </svg> 
</div>

Answer 1

You can use background-image instead of border, change the image-size to control the size of each picture and use repeat-y to make it look dotted

  background-image: linear-gradient(to bottom, #333 90%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 1px 10px;
  background-repeat: repeat-y;
  background-color: #ffffff;

to animate it simply use css

@keyframes animatedBackground {
    from { background-position: 0% 0%; }
    to { background-position: 0% 100%; }
}

to call the animation use animation: animatedBackground 20s linear infinite;

.lets-experience {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 25px;
	max-width: 150px;
	text-align: center;
	color: #fff;
	font-family: 'Gotham-Book';
	font-size: 14px;
  background:#404040;
}
.lets-experience > p {
	margin: 5px 0;
}
.lets-experience > .dots {
	width: 1px;
	height: 50px;
	margin: 0 auto 0 auto;
	//border-right: 1px dotted #fff;
  background-image: linear-gradient(to bottom, #333 90%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 1px 10px;
  background-repeat: repeat-y;
  background-color: #ffffff;
  animation: animatedBackground 20s linear infinite;
  
}

.experience-arrow {
	width: 2em;
	height: 2em;
	transform: rotate(90deg);
	margin: -10px -2px 0 0;
}
.experience-arrow > path {
	fill: #fff;
}
@keyframes animatedBackground {
    from { background-position: 0% 0%; }
    to { background-position: 0% 100%; }
}

<div class="lets-experience">
  <p>Lets Experience</p>
  <div class="dots"> </div>
  <svg class="experience-arrow" viewBox="0 0 20 20">
  	<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
  </svg> 
</div>

Answer 2

You can use svg to create the line and use height animation

.lets-experience {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 25px;
	max-width: 150px;
	text-align: center;
	color: #fff;
	font-family: 'Gotham-Book';
	font-size: 14px;
  background:#404040;
}
.lets-experience > p {
	margin: 5px 0;
}
.lets-experience > .dots {
	width: 10px;
	height: 50px;
	margin: 0 auto 0 auto;
	/*border-right: 1px dotted #fff;*/
}
.dots svg{
   animation: heightAnim 1s linear infinite;
}

 @keyframes heightAnim {
  from {
    height: 0px;
  }
  to {
    height: 45px;
  }
}
.experience-arrow {
	width: 2em;
	height: 2em;
	transform: rotate(90deg);
	margin: -10px -2px 0 0;
}
.experience-arrow > path {
	fill: #fff;
}

<div class="lets-experience">
  <p>Lets Experience</p>
  <div class="dots">
      <svg width="10px" height="45px">

        <line x1="5" x2="5" y1="5" y2="45" stroke="#FFF" stroke-width="5" stroke-linecap="round" stroke-dasharray="1, 10"/>

    </svg>
  </div>
  <svg class="experience-arrow" viewBox="0 0 20 20">
  	<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
  </svg> 
</div>

Answer 3

Simple animation with pure CSS

.container {
  position: relative;
}

.arrow {
  font-size: 5em;
  position: absolute;
}

.anim {
  height: 5px;
  background-color: white;
  position: absolute;
  width: 100%;
  animation: blink 1s linear alternate infinite;
}

@keyframes blink {
  from {
    height: 0px;
  }
  to {
    height: 55px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="arrow">&#8675;</div>
  <div class="anim"></div>
</div>

Answer 4

I hope this is what you are looking for. I've just changed size of dots in border-right. But you have to change the margin of text from border. Because due to changing of size the text becomes nearer to dots.

 .lets-experience > .dots {
            width: 1px;
            height: 50px;
            margin: 0 auto 0 auto;
            border-right: 3px dotted #fff;
        }

Answer 5

Maybe you will try with this:

.dots:before {
    content: '';
    width: 10px;
    margin-left: -5px;
    position: absolute;
    background: #404040;
    height: 0%;
}

And animate height from 0% to 100% with CSS transition or JS; I hope this help.