Question

当我将鼠标悬停在圆圈边缘时，我试图为圆圈的边框设置动画，以便逐渐填满。到目前为止我的@keyframes动画代码没有运气。我不确定我在这里做错了什么，因为我的关键帧定位的是.circle:hover属性的价值。

＆＃13;

.circle {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #5d0b3c;
}

#skills .text {
  position: absolute;
  top: 38px;
  left: 30px;
  width: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font: 18px sans-serif;
  transition: opacity .2s ease;
}

.circle:hover {
  animation: border;
}

@keyframes border {
  0% {
    border: none;
  }
  25% {
    border: 5px solid pink;
  }
  50% {
  }
  75% {
  }
  100% {
  }
}

＆＃13;

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="card">
                <div class="card-body" style="border: 1px solid">
                    <div class="circle">
                        <span class="text">skill 1</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 1

您在CSS中传递了不完整的“参数”。当我们要使用动画时，所需的参数序列是：

animation: [name] [duration] [interpolation function]

插值功能是动画的执行方式：线性？它会快速启动并缓慢结束吗？或者你会遵循自定义节奏吗？

示例：

animation: border 1s linear;

但是，您可以使用但不需要的子参数，例如决定动画启动所需的时间。有关详细信息，请参阅this article。

Answer 2

你错误地使用了CSS。

您只需设置动画的名称，但这还不足以让您了解您真正想要做的事情。为此，您需要提供interpolation function和duration。

除此之外，我还添加了-webkit-animation，因为 Safari 和 Chrome 等浏览器需要它，尽管后者不支持据我所知，第43版。

无论如何，正确的CSS的例子是：

.circle:hover {
    -webkit-animation: border 1s linear;
  animation: border 1s linear;
}

请在此处查看完整的工作代码/演示：的 https://jsfiddle.net/9r08aoty/3/

Answer 3

您不需要动画/关键帧，只需进行简单的转换

＆＃13;

.circle {
  box-sizing:border-box; /* <<== so the circle doesn't grow with the border */
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #5d0b3c;
}

#skills .text {
  position: absolute;
  top: 38px;
  left: 30px;
  width: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font: 18px sans-serif;
  transition: opacity .2s ease;
}

.circle:hover {
  border:5px solid pink;
  transition:border .5s ease; /*<<== simple transition */
}

＆＃13;

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="card">
                <div class="card-body" style="border: 1px solid">
                    <div class="circle">
                        <span class="text">skill 1</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

圆圈边框在悬停时不动画

3 个答案: