如何在悬停CSS上实现流畅的边框动画？
我正在尝试创建一个按钮的悬停动画。 鼠标悬停时，应该有从左到下到右到上的边框过渡。 基本完成按钮结构即矩形。
<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/
现在，如果你看到它看起来相当可怕，没有光滑。 我也使用了transition属性，但这并没有解决这个问题。 我错过了什么？
我希望每个人都明白我在努力实现什么。 :）
共有1个答案
为了使CSS转换工作，它必须有2个特定的值之间转换。 因此，为了让它“平稳”地过渡，它需要有一个定义良好的起点和终点，您正在提供这些起点和终点。
所以在这个场景中，您只需要添加一个简单的“border:1px（或零）solid transparent；” 属性，该属性将为它们提供一些过渡对象。
:）快乐编码！
-
问题内容： 我有一行要在悬停时应用背景突出显示。 然而，随着边境增加了1px的 额外 的元素，它使得“移动”。我在这里如何补偿以上动作（不使用背景图片）？ 问题答案： 您可以使边框透明。这样，它就存在了，但却是不可见的，因此它不会推动任何事情： 如果您的元素具有指定的和/或，则还可以使用，因为此框模型在计算出的大小中包括了填充和边框宽度，例如：
-
我非常喜欢React中的内联CSS模式，并决定使用它。 但是，不能使用和类似的选择器。那么，在使用内联CSS样式时，实现悬停高亮显示的最佳方法是什么？ #reactjs的一个建议是使用一个可点击的
-
https://mdbootstrap.com/docs/b4/jquery/javascript/lightbox 这个网站上的效果是怎么实现的? 问题关键: 图片和遮罩重叠, 而且遮罩在图片的上面, 导致点击不到图片 目前项目中用到了 viewer.js 插件, 是一个图片查看器, 通过点击图片来触发一个弹窗 我原先想的是在图片上面加一层 before 伪类, 实现悬停显示半透明白色背景, 代
-
我有使用材料UI的卡片组件。卡在悬停状态下变换，卡上也会出现阴影。但是当我把盒子-阴影在变身之前的盒子上出现阴影，并且变身的卡片和阴影之间有空白。我该怎么解决这个？ 其他方式的相同输出：
-
问题内容： 有时，我可以选择使用CSS元素：悬停或JavaScript onmouseover来控制页面上html元素的外观。考虑以下情况，其中div包装了输入 我希望输入将鼠标光标悬停在div上时更改背景色。CSS方法是 JavaScript方法是 每种方法的优点和缺点是什么？CSS方法是否适用于大多数Web浏览器？JavaScript比CSS慢吗？ 问题答案： ：hover的问题是IE6仅在链
-
问题内容： 当您将鼠标悬停在某个元素上时，我会旋转它。悬停时，动画将停止。简单： 但是，当您将鼠标悬停时，动画会突然停止，恢复为0度。我想重新设置动画位置，但是在语法设计上遇到了一些麻烦。 任何输入都会很棒！ 问题答案： 解决方案是在.elem中设置默认值。但是此动画可以与-moz一起正常使用，但尚未在-webkit中实现 它可以在Firefox上正常运行，但不能在Chrome上运行
-
问题内容： 我想修复iOS上的悬停效果（更改为touch事件），但我没有任何想法。让我解释一下。您的页面中有文字： 搭配风格： 好吧，在dekstop中，如果将鼠标放在文本上，则会得到#ddd背景，对吗？但是在iOS中，如果您触摸文本，您什么也不会得到，但是如果您点击它，它将得到一个丑陋且粘滞的#ddd背景，这不是很好，我希望用户在触摸文本时获得悬停效果（我认为是诸如touchevent之类的东西
-
问题内容： 我经常发现自己想调试CSS布局问题，这些问题涉及Java语言引起的DOM更改，以响应悬停事件或由于：hover选择器而导致的不同CSS规则。 通常，我会使用Firebug来检查给我带来麻烦的元素，并查看其CSS属性是什么，以及这些属性来自何处。但是，当涉及到悬停时，这将变得不可能，因为一旦将鼠标移到Firebug面板上，感兴趣的元素就不再悬停，适用的CSS规则也会不同，并且（在这种情况