Css @关键帧无法在chrome桌面上工作(IE/chrome mobile all OK)

Css @关键帧无法在chrome桌面上工作(IE/chrome mobile all OK),css,google-chrome,css-animations,Css,Google Chrome,Css Animations,我正在尝试创建一个滚动照片横幅。它正在开发IE、safari(手机)和android和iphone上的chrome。它不在我的桌面上工作,或者如果我在任何chrome设备上请求桌面站点。我花了几个小时在谷歌上搜索,试图找出这个问题,但根本无法解决。 这是我第一次问问题,所以如果我的帖子有问题,请容忍我。多谢各位 #container { width: 100%; overflow: hidden; margin: 5px; background: white; } .photobanner {

我正在尝试创建一个滚动照片横幅。它正在开发IE、safari(手机)和android和iphone上的chrome。它不在我的桌面上工作,或者如果我在任何chrome设备上请求桌面站点。我花了几个小时在谷歌上搜索,试图找出这个问题,但根本无法解决。 这是我第一次问问题,所以如果我的帖子有问题,请容忍我。多谢各位

#container {
width: 100%;
overflow: hidden;
margin: 5px;
background: white;
}

.photobanner {
height: 350px;
width: 3550px;
margin-bottom: 10px;
}

.photobanner img {
margin: 10px;
max-height: 300px;
margin-top: 30px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


      /*keyframe animations*/
.first  {
-webkit-animation: bannermove 30s linear infinite;
        animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
0% {
margin-left: 0px;
 }
 100% {
margin-left: -2125px;
 }

}


@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }

}


    /* Landscape phones and down */
@media (max-width: 750px) {#container {
    width: 100%;
    overflow: hidden;
    margin: 5px 5px;
    background: white;
}
.photobanner {
height: 160px;
width: 3550px;
margin-bottom: 5px;
    }

.photobanner img {
margin: 5px;
max-height: 150px;
margin-top: 5px;
    }
}

我希望这个答案不会来得太晚,但我刚刚解决了一个类似于你的问题,所以我想我会分享我的解决方案

  • 将常规动画规则放在特定于浏览器的规则之后。看看这个答案()
  • 您可能需要在“匿名”选项卡中打开您的网站!由于浏览器cookies,样式表更改可能不会立即更新

  • 你介意发布HTML和/或在上面添加一些可行的代码吗?您好,很抱歉我没有使用JSFIDLE,希望这个链接能起作用。。。。非常感谢:)您是否尝试过使用不带引号的关键帧?