CSS 转换完成后返回

Question

我不确定我是累了还是怎么的，但我正在尝试让一个小箭头 (▶) 在用户悬停 link.[=13 时从左向右移动=]

这是我的 CSS:

a:after {
    transition: transform 1s ease-in-out;
    content: "▶";
}

a:hover:after {
    transform: translateX(20px);
}

当鼠标悬停在 link 上时，箭头开始移动，但是一旦它向右移动 20px，它就会立即跳回到原来的位置，即使我仍然悬停在 link 上。

这是为什么？

http://jsfiddle.net/tzyorz12/

Answer 1

a:after {
    position: absolute;
    transform: translateX(0) translateY(0);
    transition: transform 1s ease-in-out;
    content: "▶";
}

a:hover:after {
    transform: translateX(20px);
}

<a href="#">Foaaao</a>
<br>
<a href="#">F0o</a>
<br>
<a href="#">F0asdsdo</a>
<br>
<a href="#">F0gggggggo</a>

Answer 2

显然我累了。内联元素似乎无法转换（至少可靠）。将 display: inline-block 添加到伪元素解决了我的问题。

Answer 3

只需添加：

position: absolute;

对于transform

演示： http://jsfiddle.net/tzyorz12/1/

Answer 4

您需要修改布局：

a:after {
  transform: translateX(0) translateY(0);
  content: " ▶";
  display:inline-block;
}

a:hover:after {
  transform:translateX(20px) translateY(0); 
  transition: transform 1s ease-in-out;
}

<a href="#">Foo</a>

如果你想让箭头停留在过渡结束时，你可以使用动画或者在悬停状态下设置一个很长的过渡：

a:after {
  transform: translateX(0) translateY(0);
  transition: transform 10000000s ease-in-out;/* freeze effect on such a long time */
  content: " ▶";
  display:inline-block;
}
a:hover:after {
  transform:translateX(20px) translateY(0); 
  transition: transform 1s ease-in-out;
}

<a href="#">Foo</a>

Answer 5

通过添加 display: inline-block;

修复

检查更新后的 fiddle http://jsfiddle.net/dyaa/tzyorz12/2/

CSS 转换完成后返回

CSS transform moves back after completion

css

css-animations