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

标签 css animation keyframe

我在安装 Wordpress 时使用了以下代码,它在我的实时站点上不起作用,但在本地 mamp 上运行良好。所有 Assets 都在浏览器中正确显示。它只是不工作。我希望有人知道我的代码可能有什么问题。

有什么可以干扰 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;
}

最佳答案

背景位置缺少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 关键帧动画在本地工作,但不在我的网站上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23610152/

相关文章:

javascript - 如何使用@keyframes 正确地为每个 div 设置动画以在纯 JavaScript 中滑动?

wpf - 在确切的关键帧停止 Storyboard

css - React 组件的本地较少样式表

css - 交错无限CSS动画

apache-flex - Flex 与 DHTML 有哪些区别?

ios - UITableViewCell 上的动画

javascript - 使用 Javascript 检测 CSS 动画关键帧

css - 如何在动态高度的 flexbox 中进行 div 拉伸(stretch)?

javascript - 角色跳跃脚本javascript平台游戏

html - 当 div 在 float 元素下方折叠时保持 div 的垂直间距