使用CSS的关键帧动画 - 不适用于Chrome

我创建了一个jsfiddle，其代码在Chrome（版本48.0.2564.116）中工作时遇到问题，但在IE（版本11.0.9600.17631）中可用。在IE中，背景图片的动画效果很好，但Chrome浏览器没有出现动画。使用CSS的关键帧动画 - 不适用于Chrome

在此先感谢您的帮助。

的代码如下：

#backgroundOnly { 
 
background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); 
 
background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); /* IE 10+ */ 
 
} 
 

 
#backgroundAnimation { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: red; 
 
    position :relative; 
 
    animation: spotLight 5s linear 0s infinite alternate; 
 
    -webkit-animation: spotLight 5s infinite alternate linear 0s ; 
 
    background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); Safari /*5.1+, Mobile Safari, Chrome10+ */ 
 
} 
 

 
@keyframes spotLight { /* IE 10+ */ 
 
    from {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);} 
 
    to {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);} 
 
} 
 

 
@-webkit-keyframes spotLight { /*Safari 5.1+, Mobile Safari, Chrome10+ */ 
 
    from {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);} 
 
    to {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);} 
 
}

<!DOCTYPE html> 
 

 
<body> 
 
<div id="backgroundOnly"> 
 
    <p>background only</p> 
 
    <div id="backgroundAnimation"> 
 
     <p>background animation</p> 
 
    </div> 
 
</div> 
 
</body>

来源

2016-03-06 vlady

https://jsfiddle.net/b4192ynm/1/

颇有些错字和错误代码。

#backgroundOnly { 
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 50%, #ccc49f 100%); 
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 50%, #ccc49f 100%); 
} 

#backgroundAnimation { 
    width: 200px; 
    height: 100px; 
    background: red; 
    position: relative; 
    -webkit-animation: spotLight 2s linear 0s infinite alternate; 
    animation: spotLight 2s linear 0s infinite alternate; 
} 

@-webkit-keyframes spotLight { 
    from { 
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 75%, #ccc49f 100%); 
    } 
    to { 
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 20%, #ccc49f 100%); 
    } 
} 

@keyframes spotLight { 
    from { 
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 75%, #ccc49f 100%); 
    } 
    to { 
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 20%, #ccc49f 100%); 
    } 
}

所以现在至少他们在Chrome中从一边滑到另一边。如果你的意思是他们没有很好地逐渐改变，那么这个问题是this question.的副本正如你可以阅读那里，在这一刻，只有IE支持这一点。

来源

2016-03-06 09:53:44

使用CSS的关键帧动画 - 不适用于Chrome

回答

相关问题