Question

我在我的网站上有这个介绍部分，通过CSS-animate进行背景色动画。问题：它需要很多性能，如果我在首页上停留超过20秒，我的macbook pro会像火一样变热。

http://www.timrodenbroeker.de

您是否有一个好主意，如何在不需要访问者设备的整体性能的情况下获得相同的效果？也许用Javascript？

THX很多！

.intro {
    -webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;}

@-webkit-keyframes AnimationName {
    0%{background-color: #ff5326;}
    25%{background-color: #009350;}
    50%{background-color: #2b48c0;}
    75%{background-color: #009350;}
    100%{background-color: #ff5326;}    
}

@-moz-keyframes AnimationName {
    0%{background-color: #ff5326;}
    25%{background-color: #009350;}
    50%{background-color: #2b48c0;}
    75%{background-color: #009350;}
    100%{background-color: #ff5326;}    
}

@keyframes AnimationName { 
    0%{background-color: #ff5326;}
    25%{background-color: #009350;}
    50%{background-color: f2b48c0;}
    75%{background-color: #009350;}
    100%{background-color: #ff5326;}    
}

Answer 1

这背后的原因是你是一个无限循环。因此CPU会变热。您可以添加到.intro的属性是

transform: translateZ(0);

这段代码应该降低所需的性能。见http://ariya.blogspot.se/2011/07/fluid-animation-with-accelerated.html

切换到Javascript应该有所不同，所以我会选择上面提到的属性。如果你不想要，我猜使用GIF是一种选择，但它不是很优雅。

希望这有帮助

CSS动画背景色需要太多性能！寻找选项

1 个答案: