CSS 动画在 Chrome/Webkit 浏览器上失败

Question

我目前正在设计一个博客，我在 Chrome(和一般的 webkit 浏览器)上发现了一个奇怪的故障。

我将“阅读更多”链接放在方括号中，表示我想在悬停时以某种方式移动，然后在鼠标移开时返回。 它在 IE 或 Firefox 上就像一个魅力，但在 Chromium 中，当动画结束时，它会跳回初始位置(我认为它会在屏幕上弹出 url 时停止)。

.read_more {
  font-family: sans-serif;
  color: black;
  text-decoration: none;
  padding-left: 20px;
}
.read_more:hover {
  color: black;
}
.read_more:before {
  content: '[ ';
  transition: all ease-out .35s;
}
.read_more:after {
  content: ' ]';
  transition: all ease-out .35s;
}
.read_more:hover:after {
  transform: translateX(4px);
  transition: all ease-out .35s;
}
.read_more:hover:before {
  transform: translateX(-4px);
  transition: all ease-out .35s;
}

 <h2>This is an article</h2>
<p>
  Ut viverra vel eros ut laoreet. Pellentesque eu imperdiet eros, eu pharetra libero. Aenean id tempor arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit [...]
</p>
<a class="read_more" href="#">Read more</a>

有没有人有解决这个问题的想法？

这是我的代码的代码笔:codepen

Answer 1

默认情况下 :before 和 :after 伪元素是 inline elements . CSS specs transformable elements 中未列出行内元素所以他们根本不应该动画。

也就是说，将 display:inline-block; 添加到伪元素可以解决您的问题，因为内联 block 元素是可转换的:

.read_more {
  font-family: sans-serif;
  color: black;
  text-decoration: none;
  padding-left: 20px;
}
.read_more:hover {
  color: black;
}
.read_more:before {
  content: '[ ';
  display:inline-block;
  transition: all ease-out .35s;
}
.read_more:after {
  content: ' ]';
  display:inline-block;
  transition: all ease-out .35s;
}
.read_more:hover:after {
  transform: translateX(4px);
  transition: all ease-out .35s;
}
.read_more:hover:before {
  transform: translateX(-4px);
  transition: all ease-out .35s;
}

<h2>This is an article</h2>
<p>
  Ut viverra vel eros ut laoreet. Pellentesque eu imperdiet eros, eu pharetra libero. Aenean id tempor arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit [...]
</p>
<a class="read_more" href="#">Read more</a>