Question

我试图创建一个滚动的照片横幅。它正在开发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;
    }
}

Answer 1

我希望这个答案不会太迟，但我刚刚解决了与你类似的问题，所以我想我会分享我的解决方案。

将您的常规动画规则放在浏览器特定的规则之后。请参阅此答案（css3 animation not working in chrome）。
您可能需要以＆＃34;隐身身份打开您的网站。标签！由于浏览器cookie，样式表更改可能不会立即更新。

@keyframes无法在Chrome桌面上工作（IE / Chrome手机都OK）

1 个答案: