Link 使用 CSS3 动画缩进

Question

我正在使用以下代码为一些链接设置动画：

.indenting_links li a:hover {
  padding-left: 20px;
  -webkit-transition: padding-left 500ms ease-out;
  -moz-transition: padding-left 500ms ease-out;
  -o-transition: padding-left 500ms ease-out;
  transition: padding-left 500ms ease-out;
}

<ul class="indenting_links">
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li><a href="">Link 3</a></li>
  <li><a href="">Link 4</a></li>
  <li><a href="">Link 5</a></li>
  <li><a href="">Link 6</a></li>
  <li><a href="">Link 7</a></li>
  <li><a href="">Link 8</a></li>
  <li><a href="">Link 9</a></li>
  <li><a href="">Link 10</a></li>
</ul>

问题： 链接跳回跳过检索动画。

代码片段： CodePen

我在一个俄语网站上找到了一个在线翻译，上面写着：

And if you add this effect not to: hover, but to the element itself, then there will also be no jump on return

但我不知道那是什么意思。

Answer 1

这意味着您应该将转换设置为默认状态，而不是悬停状态：

.indenting_links li a:hover {
  padding-left: 20px;
}

.indenting_links li a {
  -webkit-transition: padding-left 500ms ease-out;
  -moz-transition: padding-left 500ms ease-out;
  -o-transition: padding-left 500ms ease-out;
  transition: padding-left 500ms ease-out;
}

<ul class="indenting_links">
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li><a href="">Link 3</a></li>
  <li><a href="">Link 4</a></li>
  <li><a href="">Link 5</a></li>
  <li><a href="">Link 6</a></li>
  <li><a href="">Link 7</a></li>
  <li><a href="">Link 8</a></li>
  <li><a href="">Link 9</a></li>
  <li><a href="">Link 10</a></li>
</ul>

如果你只是在悬停状态下进行过渡，当鼠标离开元素时，过渡规则就会丢失，因此会发生跳转。通过将转换放在元素上而不考虑状态，将始终应用转换。

Link 使用 CSS3 动画缩进

Link Indenting using CSS3 Animation

html

css

hover

css-animations