如何在悬停 CSS 上实现平滑的边框动画？答案

【问题标题】：How to achieve smooth border animation on hover CSS?如何在悬停 CSS 上实现平滑的边框动画？
【发布时间】：2020-06-13 22:16:54
【问题描述】：

我正在尝试为按钮创建悬停动画。在鼠标悬停时，应该有从左到下到右到上的边框过渡。基本完成按钮结构即矩形。

<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: white;
  position: relative;
  animation: mymove 800ms ;
  transition: all ease-in-out;
}

@keyframes mymove {
  0%{
        border-left: 1px solid;
    }
    25%
    {
    border-left: 1px solid;
border-bottom: 1px solid;
    }
    50%
    {
    border-left: 1px solid;
border-bottom: 1px solid;
        border-right: 1px solid;
    }
    100%
    {
    border-left: 1px solid;
border-bottom: 1px solid;
        border-right: 1px solid;
        border-top: 1px solid;
    }
}
</style>
</head>
<body>

<h1>The @keyframes Rule</h1>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

https://jsfiddle.net/ymbspr63/

现在，如果您看到它看起来很糟糕并且没有平滑度。我也使用了转换属性，但这并没有解决问题。我在这里错过了什么？

我希望每个人都能理解我想要实现的目标。 :)

【问题讨论】：

检查这个：stackoverflow.com/a/48695388/8620333
您可以从以下方面启发自己：codepen.io/gc-nomade/pen/HcDFk、codepen.io/gc-nomade/pen/pKwby 或codepen.io/gc-nomade/pen/kpHGv，所有这些都基于渐变、关键帧、背景大小，即使是几年前它仍然有效。今天你也很好地支持了 SVG
@TemaniAfif 我看到了这个帖子。这几乎是我正在寻找的。虽然它使用不同的方法，即背景属性。我喜欢你给出的解释。对此感激不尽。我试图更清楚地理解它。另外，我自己尝试了一些东西并实现了这一点 - [link]jsfiddle.net/x3hkuyj5
@G-Cyrillus 感谢您链接一些示例。这绝对有帮助。我会尝试通过代码并理解它。
@TemaniAfif 我认为我想要实现的目标不会发生在边框属性上。由于边框本身就是一条完整的线，并且没有起点和终点。它会显示为一整行。哎呀！如果我错了，请纠正我。 PS - 我认为你的方法似乎适合我。

标签： css

【解决方案1】：

要使 CSS 过渡生效，它必须有 2 个特定的值才能在它们之间进行过渡。因此，要让它“顺利”过渡，它需要有一个明确定义的起点和一个终点，这是您提供的。

因此，在这种情况下，您只需要添加一个简单的“边框：1px（或零）纯透明；”属性，这将给他们一些过渡的东西。

:) 编码快乐！

【讨论】：

嘿。你的建议效果很好。至少我现在的过渡要顺利得多。我应用了边框：3px 实心透明，现在动画效果要好得多。到目前为止，我实现了这一点 - jsfiddle.net/x3hkuyj5 现在，如果你看到它很好地淡出，但边框很快就会出现。它就像所有整个边框都被应用，而不是一个单边边框首先出现，然后是第二个，依此类推。此外，Temani Afif 有他自己的方法来实现我想要的。如果我自己做不到，我会使用他的代码。