Chrome / Webkit 浏览器上的 CSS 动画失败答案

【问题标题】：CSS animation fail on Chrome / Webkit browsersChrome / Webkit 浏览器上的 CSS 动画失败
【发布时间】：2016-04-14 22:22:41
【问题描述】：

我目前正在设计一个博客，我在 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

【问题讨论】：

标签： css google-chrome css-transitions css-animations

【解决方案1】：

默认情况下:before 和:after 伪元素是inline elements。内联元素未在 CSS specs transformable elements 中列出，因此它们根本不应设置动画。

也就是说，将display: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>

【讨论】：

谢谢您的解释！

【解决方案2】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：