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

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

有人有办法解决这个问题吗？

这是我的代码的代码笔：代码笔

默认情况下，:before和:after伪元素是内联元素。内联元素没有列在CSS规范的可转换元素中，所以它们根本不应该动画化。

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

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

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

尝试将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;
}

相关内容

最新更新

热门标签：