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

Question

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

我将我的 "read more" link 括起来，我想在悬停时以某种方式移动，然后在鼠标移开时返回。它在 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

您可以尝试将伪元素设置为 display: inline-block;

已更新 - http://codepen.io/anon/pen/QyvewX

Answer 2

默认情况下，:before 和 :after 伪元素是 inline elements. Inline elements aren't listed in the CSS specs transformable elements，所以它们根本不应该有动画。

也就是说，将 display:inline-block; 添加到伪元素可以解决您的问题，因为 inline-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>

Answer 3

尝试将您的 CSS 代码更新为以下代码以避免浏览器兼容性问题：

.read_more {
  font-family: sans-serif;
  color: black;
  text-decoration: none;
  padding: 0 10px;
  position: relative;
}

.read_more:hover {
  color: black;
}

.read_more:before,
.read_more:after {
  content: "[";
  position: absolute;
  left: 0;
  top: 0;
  transition: all ease-out .35s;
}

.read_more:after {
  content: ' ]';
  left: inherit;
  right: 0;
  transition: all ease-out .35s;
}

.read_more:hover:before {
  left: -5px;
  transition: all ease-out .35s;
}

.read_more:hover:after {
  left: inherit;
  right: -5px;
  transition: all ease-out .35s;
}

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

CSS animation fail on Chrome / Webkit browsers

css

google-chrome

css-transitions

css-animations