Chrome/Webkit瀏覽器上的CSS動畫失敗

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：codepen

Answer 1

默認:before和:after僞元素是inline elements。內聯元素沒有在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 2

你可以嘗試僞元素設置爲display: inline-block;

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

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; 
}