为什么这个 CSS 动画会导致 chrome 崩溃，我该如何解决？答案

【问题标题】：Why is this CSS animation crashing chrome and how can I fix it?为什么这个 CSS 动画会导致 chrome 崩溃，我该如何解决？
【发布时间】：2014-05-31 04:19:10
【问题描述】：

看看这段代码： 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/

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

【问题讨论】：

标签： html css google-chrome css-animations

【解决方案1】：

这里您使用的是 rem 而不是 px 或 em。我使用 px 进行了尝试，它可以在我的 google chrome 浏览器上运行。

看看

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

试试看

【讨论】：