你如何定义css链接的缓入和缓出？

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技能。我想用链接做的是当你将鼠标悬停在它们上面时，我希望它们能够平滑地分隔出来，因此字母间距在：悬停。我已经对它进行了测试，效果非常好，我的问题是当你将鼠标从链接上移开时，它们不会顺利地回到原始字母间距。为了更好地解释，当你将鼠标悬停在它们上方时，它们会以1 px的速度向外移动，但是当你将它们悬停时，它们会在我将它们转移到过渡到0px时重新回到0px。

我相信（我可能错了）我可以通过正确使用缓入和缓出标签来解决这个问题，但我不确定如何将其纳入我的CSS和我＆＃ 39;我到处看，但我无法找到答案，所以我在这里

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;
}

Answer 2

它会快速恢复，因为处于默认状态的链接没有转换。

将转换移至a本身的新规则：

a {
  transition: all 1s ease;
}

这会扩展所有其他状态，例如a:link和a:hover。

Answer 3

问题是因为你需要在元素上定义transition之前发生任何动作，即。在a规则中，而不是a:hover规则。

还有其他一些事项需要注意：

• 您不需要transition上的供应商前缀。该规则现在支持所有主流浏览器。
默认情况下，cursor: pointer状态不需要
• hover。

试试这个：

＆＃13;

＆＃13;

a { 
  transition: letter-spacing 1s ease; 
}
a:link, 
a:visited {
  color: #232323;
}
a:hover {
  letter-spacing: 1px;
}
a:active {
  text-decoration: none;
}

＆＃13;

<a href="#">Lorem ipsum dolor sit</a>

＆＃13;

＆＃13;

＆＃13;