我正在尝试创建一个按钮的悬停动画。 鼠标悬停时，应该有从左到下到右到上的边框过渡。 基本完成按钮结构即矩形。
<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属性，但这并没有解决这个问题。 我错过了什么？
我希望每个人都明白我在努力实现什么。 :）
为了使CSS转换工作，它必须有2个特定的值之间转换。 因此，为了让它“平稳”地过渡，它需要有一个定义良好的起点和终点，您正在提供这些起点和终点。
所以在这个场景中，您只需要添加一个简单的“border:1px（或零）solid transparent；” 属性，该属性将为它们提供一些过渡对象。
:）快乐编码！
