javascript - css链接的ease-in和ease-out是怎么定义的？

Question

我正在创建一个基本布局，这是目前我的链接的 css

a:link {
color: #232323;}

a:visited {
color: #232323;}

a:hover {
letter-spacing: 1px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer}

a:active {
text-decoration: none;}

这可能是个愚蠢的问题，但我仍在练习我的 html/css 技能。我想对我的链接做的是，当你将鼠标悬停在它们上面时，我希望它们平滑地间隔开，因此 a:hover 中的字母间距。我已经对其进行了测试并且效果很好，我的问题是当您将鼠标从链接上移开时，它们不会顺利地恢复到原始字母间距。为了更好地解释，当您将鼠标悬停在它们上方时，它们会间隔 1 像素，但是当您将鼠标悬停在它们上方时，当我不希望它们过渡到 0px 时，它们会突然变回 0px。

我相信(我可能是错的)我可以通过正确使用 ease-in 和 ease-out 标签来解决这个问题，但我不确定如何将它合并到我的 css 中，我到处都看过但是我找不到我的答案所以我在这里

Answer 1

问题是您已经在元素的 :hover 状态上定义了转换。您应该在元素本身上定义它。

这样，无论元素的状态如何，转换都会一直应用。

a {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

a:link {
    color: #232323;
}

a:visited {
    color: #232323;
}

a:hover {
    letter-spacing: 1px;
    cursor: pointer;
}

a:active {
    text-decoration: none;
}