为什么这个CSS动画会崩溃chrome并且我该如何修复它？

Question

看看这段代码： CSS：

@-webkit-keyframes crashChrome {
        0%{ -webkit-transform: translateX(0rem);}   
}




.anim:before{
    content: "";    
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;      
    position: absolute;
    left:5rem;  
    top: 5rem;
        background-color: #06839f;  

        -webkit-animation: crashChrome;  
}

HTML

<div class="anim"></div>

可以在此处找到代码：http://codepen.io/OpherV/pen/xsemw/

如果你在chrome中打开它，你会得到：

http://codepen.io/OpherV/pen/xsemw/

我认为这与伪元素和转换有关。 怎么解决这个问题？

Answer 1

这里你使用的是rem而不是px或em。我尝试使用px，它在我的谷歌浏览器浏览器上工作。

看看

<div class="anim"></div>
<style>
@-webkit-keyframes crashChrome {
    0%{ -webkit-transform: translateX(5px);}   
}
.anim:before{
content: "";    
width: 5px;
height: 5px;
border-radius: 1px;      
position: absolute;
left:50px;  
top: 50px;
    background-color: #06839f;  

    -webkit-animation: crashChrome;  
}
</style>

试试吧