Question

我在Wordpress安装中使用了以下代码，它在我的实际网站上没有工作，但在mamp本地运行正常。所有资产都在浏览器中正确显示。它只是不工作。我希望有人知道我的代码可能有什么问题。

有什么可以干扰CSS关键帧动画吗？

@keyframes animatedBackground {
  from { background-position: -405 0; }/*1048+ - Default Styles*/
  to { background-position: 1090 0; }/*1048+ - Default Styles*/
}
@-webkit-keyframes animatedBackground /* Safari and Chrome */
{
  from { background-position: -405 0; }/*1048+ - Default Styles*/
  to { background-position: 1090 0; }/*1048+ - Default Styles*/
}
.animation {
  -webkit-animation-name: animatedBackground;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 12s;
  -webkit-animation-play-state: running;
  animation-name: animatedBackground;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-duration: 12s;
  animation-play-state: running;
}

Answer 1

背景位置缺少

px

@keyframes animatedBackground {
  from { background-position: -405px 0; }/*1048+ - Default Styles*/
  to { background-position: 1090px 0; }/*1048+ - Default Styles*/
}
@-webkit-keyframes animatedBackground /* Safari and Chrome */
{
  from { background-position: -405px 0; }/*1048+ - Default Styles*/
  to { background-position: 1090px 0; }/*1048+ - Default Styles*/
}

希望您在Chrome中测试该页面。

CSS关键帧动画在本地工作，但不在我的网站上

1 个答案: