将鼠标悬停在按钮 #2 上时，如何使过渡更顺畅

Question

当鼠标悬停在按钮 #2 上时，如何使黑色边框的过渡更平滑？

目前，将鼠标悬停在按钮 #2 上时会有轻微延迟。有更好的方法吗？

我希望使圆形按钮的边框能够快速填充。目前，它有点滞后，我觉得这让人分心。

谢谢！

.btn {
  width: 130px;
  height: 50px;
  border: none;
  margin: 4rem;
}

.btn2 {
    position: relative;
    overflow: hidden;
    transition:  height .5s;
}


.btn2::after {
  content:"";
  display: block;
  background-color: black;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top:50px;
  left:50px;
  opacity: .2;
  transition: top 1.2s ease-out;
}

.btn2::before {
  content:"";
  display: block;
  background-color: black;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: absolute;
  top:-50px;
  left:15px;
  opacity: .2;
  transition: top 1.2s ease-out;
}


.btn2:hover::before{
  position: absolute;
  top:34px
}

.btn2:hover::after{
  position: absolute;
  top:70px
}

.btn2:hover {
  height: 130px;
  border-radius: 50%;
  animation:circle 4s ease;
}

@keyframes circle {
  0%{ border:none}
  10%{border-top:2px solid}
  25%{border-right:2px solid}
  45%{border-bottom:2px solid}
  65%{border-left:2px solid}
  85%{border:2px solid}
  100%{border:2px solid}
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Great Demo on CodePen</title>
</head>
<body>
  <div class="wrap">
    
   <button class="btn btn2">button 2 !!</button>
  </div>
  
</body>
</html>

Answer 1

出现问题是因为边框的长度不可设置动画。因此，当您在动画中将顶部边框更改为 solid/with color/with 宽度时，所有顶部边框都会立即显示。因此，在给定的动画中，在绘制边框时每个动画点都会出现抖动。再加上它们不是直线边框，这给每个边框的末端带来了一种锥形外观。

Transform rotate 是可动画的并且应该是平滑的，因此在按钮顶部放置另一个圆圈并旋转它以在绘制时一点一点地显示边框应该可以工作。但是，我遇到了一些问题运行，因为在半径为 50% 的高清屏幕上，像素（屏幕像素）的匹配不准确（就 CSS 像素而言）- 边界的一点点即使表面上被顶部的圆圈覆盖也可以看到。

因此，这不是问题的完美答案，但可以提供一些关于如何获得所需影响的想法。

它将另一个 'button' 放在 btn2 之上，并将它们都放在一个容器中。 btn2 动画显示依次显示 4 个边框（就像问题中给出的代码一样），顶部的新按钮在旋转时“显示”这些边框。这个额外的按钮可能是一个与容器关联的伪元素，如果 wrap 没有被用于其他可以成为容器的东西而不需要改变 HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Draw circle</title>
<style>
* {
  margin: 0;
  padding: 0;  
}

    .btn2container {
      position: relative;
    }
    .btn {
      width: 130px;
      height: 50px;
      border: none;
      margin: 4rem;
      --bg: #eeeeee;
    }

    .btn2 {
        position: relative;
        overflow: hidden;
        transition:  height .5s;
        border-width: 3px;
        background-color: var(--bg);
    }


    .btn2container:hover .btn2 {
      border-style: none;
      border-color: transparent;
      height: 130px;
      border-radius: 50%;
      animation:circle 4s linear;
      animation-fill-mode: forwards;
      border-width: 3px;
    }
    .btn2container .revealer {
      position: absolute;
      animation-name: none;
      animation-duration: 4s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      z-index:999;
      transform: rotate(0deg);
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border-style: solid;
      display: none;
      overflow: hidden;
      background-color:transparent;
      border-style: solid;
      border-width:3px;
      border-color: red transparent transparent transparent;
    }
    .btn2container:hover .revealer {
      animation-name: reveal;
      display: block;
    }
  @keyframes reveal {
    0% {
      display: block;
      opacity: 1;
      height: 130px;
      width:130px;
      transform: rotate(0deg);
      border-width:3px;
      border-color: var(--bg) transparent transparent transparent;
      box-shadow: 0 0 0 2pt white;
    }
    74.9999% {
      transform: rotate(270deg);
      border-width:3px;
      border-color: var(--bg) transparent transparent transparent;
      box-shadow: 0 0 0 2pt white;
    }
    75% {
      border-width: 2px;
      border-color: transparent transparent transparent black;
    }
    99.9% {
      transform: rotate(360deg);
      border-color: transparent transparent transparent black;
      opacity: 1;
      border-width: 2px;
    }
    100% {
      opacity:0;
      border-width: 3px;
    }
  }
    @keyframes circle {
      0% {
        border-style: solid;
        border-color: black transparent transparent transparent;
        border-width: 2px;
      }
      24.99% {
        border-color: black transparent transparent transparent;
        border-width: 3px;
      }
      25% {
        border-color: black  black transparent transparent;
        border-width: 3px;
      }
      49.99% {
        border-color: black  black transparent transparent;
        border-width: 3px;
      }
      50% {
        border-color: black black black transparent;
        border-width: 3px;
      }
      99.99% {
        border-color: black black black transparent;
        border-width: 3px;
      }
      100% {
        border-color: black;
        border-style: solid;
        border-width: 3px;
      }
      }

    .btn2::after {
      content:"";
      display: block;
      background-color: black;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: absolute;
      top:50px;
      left:50px;
      opacity: .2;
      transition: top 1.2s ease-out;
    }

    .btn2::before {
      content:"";
      display: block;
      background-color: black;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      position: absolute;
      top:-50px;
      left:15px;
      opacity: .2;
      transition: top 1.2s ease-out;
    }


    .btn2container:hover .btn2::before{
      position: absolute;
      top:34px
    }

    .btn2container:hover .btn2::after{
      position: absolute;
      top:70px
    }

    </style>
    </head>
<body>
    <div class="wrap">       
    <div class="btn2container">
     <button class="btn revealer"></button>
     <button class="btn btn2">button 2 !!</button>
   </div>
   </div>     
 </body>
</html>

将鼠标悬停在按钮 #2 上时，如何使过渡更顺畅

How would I make the transition smoother when hovering over button #2

css

animation

css-transitions

smoothing

keyframe