javascript 和 CSS 动画冲突 - 翻译不起作用，不透明度起作用答案

【问题标题】：javascript and CSS animation conflict - translate doesn't works, opacity doesjavascript 和 CSS 动画冲突 - 翻译不起作用，不透明度起作用
【发布时间】：2013-09-04 10:36:28
【问题描述】：

我在这里测试了一段代码：http://jsfiddle.net/PTtJx/ 简单的 CSS 动画和一些显示屏幕大小的 JS。代码行编号。 7 停止CSS动画：翻译。删除这条线，它再次工作。我没有找到任何理由。有没有人可以确认这是一个错误或错误的代码。谢谢

<script>
function resize(){
var P,H,W,f_Factor=1;
W=window.innerWidth;
H=window.innerHeight;

P=Math.floor(f_Factor*(8+W/50));

if(P<4){P=4;}document.body.style.fontSize=P+"px";
document.getElementById("dimensions").innerHTML = W + "x" + H;
}

resize();
</script>

<style>
.slide_1 {
z-index:50;
top: 0px;
left:0%;
position: absolute;
overflow: hidden;

font-size: 30px;

}

.slide_1 {
-webkit-animation: slide 3s infinite;
-webkit-animation-delay: 0s;
 -webkit-animation-fill-mode:forwards;
 -webkit-transform-origin: 0%  0%;
 }

@-webkit-keyframes slide {

    0%{-webkit-transform: translate(0%);}
    50%{-webkit-transform: translate(250%) ;text-shadow: 0 0 10px rgba(0,0,0,1);}
    100%{-webkit-transform: translate(0%);}
}

</style>
<html> 
<span  class="slide_1"  id="dimensions">ABC</span> 
</html>

【问题讨论】：

尝试更好地缩进你的代码
就我所看到的动画作品而言。

标签： javascript css animation conflict

【解决方案1】：

这是因为属性为空。

我用 try/catch 包围 document.body.style.fontSize=P+"px";，例如：

try{document.body.style.fontSize=P+"px";}catch(ex) {alert(ex.message);}

例外是“无法读取 null 的属性 'style'。错误表示该元素不存在..

希望对你有帮助；）

【讨论】：

好的，添加这一行解决了问题，
您可以测试它.. 使用 jquery 将字体大小设置为特殊的 div。不要将字体大小设置为全文。
幻灯片（也有 250%）对我有用.. 但字体大小始终相同。好的;)
好吧，毕竟它看起来并不有效。动画不起作用的唯一情况是我使用百分比时。如果我用 translate(100px) 替换 translate(100%) 动画就可以了。但是，文本阴影确实有效。顺便说一句，我不想使用 jquery。
动画对我来说效果很好（也有百分比）..你使用哪个浏览器？