Эффект плавного наведения на многоступенчатую панель навигации в css

Question

У меня есть многоступенчатая круговая панель навигации в чистом виде css. Я хочу добиться эффекта парения, но он не работает гладко. Это очень вяло и некрасиво. Как сделать его гладким?

Можем ли мы также повлиять на наведение, когда синий шар постепенно увеличивается от 0 до полной ширины, а затем появляется белый круг вокруг него?

#stages_cont {
margin:50px auto;
width:600px;
}

#stages {
background:#d4d7df;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
height:5px;
}

#stages li {
float:left;
text-align:center;
width:33%;
}

#stages li a {
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}

.stage_done .stage_circle {
background:#2585fe;
border:6px solid #ffffff;
box-shadow:0px 0px 5px #d4d7df;
height:20px;
width:20px;
margin:-13px auto 10px;
}

.stage_not .stage_circle {
background:#d4d7df;
height:20px;
width:20px;
margin:-8px auto 17px;
-moz-transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
transition:all 0.5s ease;
}

.stage_done .stage_link {
color:#2585fe;
}

.stage_not .stage_link {
color:#d4d7df;
}

.clr {
clear:both;
}

.stage_not:hover .stage_circle {
background:#2585fe;
border:6px solid #ffffff;
box-shadow:0px 0px 5px #d4d7df;
margin:-13px auto 10px;
}

<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css" />

<div id="stages_cont">
  <ul id="stages">
      <li class="stage_done">
          <a class="stage_circle" href="#"></a>
          <a class="stage_link" href="#">Details</a>
      </li>
      <li class="stage_done">
          <a class="stage_circle" href="#"></a>
          <a class="stage_link" href="#">Content</a>
      </li>
      <li class="stage_not">
          <a class="stage_circle" href="#"></a>
          <a class="stage_link" href="#">Send or Schedule</a>
      </li>
      <div class="clr"></div>
  </ul>
</div>

Answer 1

Пожалуйста, измените css, как указано в данном фрагменте

#stages_cont {
margin:50px auto;
width:600px;
}

#stages {
background:#d4d7df;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
height:5px;
}

#stages li {
float:left;
text-align:center;
width:33%;
}

#stages li a {
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}

.stage_done .stage_circle {
background:#2585fe;
border:6px solid #ffffff;
box-shadow:0px 0px 5px #d4d7df;
height:20px;
width:20px;
margin:-13px auto 10px;
}

.stage_not .stage_circle {
       background: #d4d7df;
    height: 20px;
    text-align: center;
    width: 20px;
    margin: auto;
    /* margin: -8px auto 17px; */
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 40px;
}
li.stage_not {
  position: relative;
} 
.stage_done .stage_link {
color:#2585fe;
}

.stage_not .stage_link {
color:#d4d7df;
}

.clr {
clear:both;
}

.stage_not:hover .stage_circle {
background:#2585fe;
border:6px solid #ffffff;
box-shadow:0px 0px 5px #d4d7df;
}
.stage_not a.stage_link {
      padding-top: 29px;
}

<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css" />
<div id="stages_cont">
  <ul id="stages">
      <li class="stage_done">
          <a class="stage_circle" href="#"></a>
          <a class="stage_link" href="#">Details</a>
      </li>
      <li class="stage_done">
          <a class="stage_circle" href="#"></a>
          <a class="stage_link" href="#">Content</a>
      </li>
      <li class="stage_not">
          <a class="stage_circle" href="#"></a>
          <a class="stage_link" href="#">Send or Schedule</a>
      </li>
      <div class="clr"></div>
  </ul>
</div>

Answer 2

Обновить следующие стили

.stage_not .stage_circle {
  background: #d4d7df;
  height: 20px;
  width: 20px;
  margin: -8px auto 17px;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  box-sizing: border-box;
}

.stage_not:hover .stage_circle {
  background: #2585fe;
  border: 6px solid #ffffff;
  box-shadow: 0px 0px 5px #d4d7df;
  margin: -13px auto 10px;
  box-sizing: border-box;
  height: 32px;
  width: 32px;
}

#stages_cont {
  margin: 50px auto;
  width: 600px;
}

#stages {
  background: #d4d7df;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  height: 5px;
}

#stages li {
  float: left;
  text-align: center;
  width: 33%;
}

#stages li a {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-decoration: none;
}

.stage_done .stage_circle {
  background: #2585fe;
  border: 6px solid #ffffff;
  box-shadow: 0px 0px 5px #d4d7df;
  height: 20px;
  width: 20px;
  margin: -13px auto 10px;
}

.stage_not .stage_circle {
  background: #d4d7df;
  height: 20px;
  width: 20px;
  margin: -8px auto 17px;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  box-sizing: border-box;
}

.stage_done .stage_link {
  color: #2585fe;
}

.stage_not .stage_link {
  color: #d4d7df;
}

.clr {
  clear: both;
}

.stage_not:hover .stage_circle {
  background: #2585fe;
  border: 6px solid #ffffff;
  box-shadow: 0px 0px 5px #d4d7df;
  margin: -13px auto 10px;
  box-sizing: border-box;
  height: 32px;
  width: 32px;
}

<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css" />

<div id="stages_cont">
  <ul id="stages">
    <li class="stage_done">
      <a class="stage_circle" href="#"></a>
      <a class="stage_link" href="#">Details</a>
    </li>
    <li class="stage_done">
      <a class="stage_circle" href="#"></a>
      <a class="stage_link" href="#">Content</a>
    </li>
    <li class="stage_not">
      <a class="stage_circle" href="#"></a>
      <a class="stage_link" href="#">Send or Schedule</a>
    </li>
    <div class="clr"></div>
  </ul>
</div>

Answer 3

Вам нужно внести незначительные изменения в css для плавного опыта. Здесь я делюсь тем, что вам нужно изменить.

Добавить анимацию в "#stages li" css.

#stages li{
    transition: 0.3s ease-in-out all;
}
#stages li a{
    border: 6px solid #ffffff;
    margin: -13px auto 10px;
}
.stage_not:hover .stage_circle{
    background: #2585fe;
    box-shadow: 0px 0px 5px #d4d7df;
}
#stages li a + a{
    margin-top: 10px;
}

Answer 4

Круто:)

Добавьте анимацию CSS к вашему наведению

.stage_not:hover .stage_circle {
  animation-name: example;
  animation-duration: 0.5s;
}
@keyframes example {
  from {width:0px; border:none;}
  to {width:20px; border: 2px solid white;}
}

Очевидно, что это требует некоторой ловкости, но, по крайней мере, для начала.

https://www.w3schools.com/css/css3_animations.asp