背景颜色填充动画在偏移中结束

Question

我试图＆＃34;填写＆＃34;用户点击它时的圆圈。主要问题是，当动画结束时，它会在顶部偏移一点点。我已尝试向其添加margin-top: -1px，但它会在底部偏移！

我对任何让动画更流畅的建议持开放态度，但我的主要问题是：为什么最终结果会从顶部偏移一点，我该如何解决？

＆＃13;

＆＃13;

#searchOptions label {
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  color: #000;
  font-weight: 400;
  margin-right: 40px;
}
#searchOptions label .circle {
  display: inline-block;
  position: relative;
  border: 2px solid #000;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 12px;
}
#searchOptions label .circle:before {
  display: none;
  position: absolute;
  content: '';
  background-color: #000;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 2px;
  height: 2px;
}
#searchOptions label .txt {
  position: relative;
  top: -3px;
}
#searchOptions input[type=radio] {
  height: 0;
  width: 0;
  opacity: 0;
}
#searchOptions input[type=radio]:checked + label .circle:before {
  display: block;
  width: 100%;
  height: 100%;
  animation: fillRadio ease-in 1s;
}
@-webkit-keyframes fillRadio {
  0% {
    top: 50%;
    transform: translateY(-50%);
    width: 1%;
    height: 1%;
  }
  100% {
    top: 0%;
    transform: translateY(0%);
    width: 100%;
    height: 100%;
  }
}

＆＃13;

<div id="searchOptions">
  <input type="radio" name="searchType" value="option1" id="option1" />
  <label for="option1"><span class="circle"></span>  <span class="txt">Option 1</span>
  </label>

  <input type="radio" name="searchType" value="option2" id="option2" />
  <label for="option2"><span class="circle"></span>  <span class="txt">Option 2</span>
  </label>
</div>
<!-- id="searchOptions" -->

＆＃13;

＆＃13;

＆＃13;

Here's a JSFiddle如果有人愿意使用它。

Answer 1

我认为这个问题来自15px和50％的顶部 - ＆gt;给出一个小数

我已将大小更改为16px，即使是：

#searchOptions label {
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  color: #000;
  font-weight: 400;
  margin-right: 40px;
}
#searchOptions label .circle {
  display: inline-block;
  position: relative;
  border: 2px solid #000;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 12px;
}
#searchOptions label .circle:before {
  display: none;
  position: absolute;
  content: '';
  background-color: #000;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 2px;
  height: 2px;
}
#searchOptions label .txt {
  position: relative;
  top: -3px;
}
#searchOptions input[type=radio] {
  height: 0;
  width: 0;
  opacity: 0;
}
#searchOptions input[type=radio]:checked + label .circle:before {
  display: block;
  width: 100%;
  height: 100%;
  animation: fillRadio ease-in 1s;
}
@-webkit-keyframes fillRadio {
  0% {
    top: 50%;
    transform: translateY(-50%);
    width: 1%;
    height: 1%;
  }
  100% {
    top: 0%;
    transform: translateY(0%);
    width: 100%;
    height: 100%;
  }
}

<div id="searchOptions">
  <input type="radio" name="searchType" value="option1" id="option1" />
  <label for="option1"><span class="circle"></span>  <span class="txt">Option 1</span>
  </label>

  <input type="radio" name="searchType" value="option2" id="option2" />
  <label for="option2"><span class="circle"></span>  <span class="txt">Option 2</span>
  </label>
</div>
<!-- id="searchOptions" -->