Как мне добиться анимации, показанной в этой ссылке на видео?

Question

Я хотел добиться анимации, как показано в этой ссылке на видео. https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH

Я новичок в веб-разработке. Кто-нибудь может дать мне какую-то идею, чтобы достичь этого?

Спасибо

Answer 1

Просто наведите курсор мыши на моем примере, чтобы получить фрагмент, чтобы начать все сначала, приятель:

div {
 display: inline-block;
}

div.line-container, div.circle {
  float:left;
}

div.line-container {
  height: 50px;
  width: 50px;
  position: relative;
}
 
 div.circle {
   background-color: green;
   border-radius: 50%;
   width: 50px;
   height: 50px;
 }

div.line {
  background: #999;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}


div.line2 {
  background: red;
  position: absolute;
  top: 50%;
  left: 0;
  right: 100%;
  height: 1px;
  transition: all 1s;
  z-index: 5;
}

div.container:hover  div.line2 {
  right: 0;
}

<div class="container">
  <div class="circle"></div>
  <div class="line-container">
    <div class="line"></div>
    <div class="line2"></div>
  </div>
  <div class="circle" />
</div>