CSS3動畫在Firefox中的行為有所不同

Question

這是小提琴 。

我已經找到了解決方案，但是沒有找到。

正確的應該是Chrome / Opera / Safari中的一種。

我只想從上到下顯示圖像。

HTML：

<div class="container">
   <img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg" />
</div>

CSS：

@-webkit-keyframes pan {
0% {
    -webkit-transform: translate(0%, 0%);
}
100% {
    top: 100%;
    -webkit-transform: translate(0%, -100%);
}
}
@keyframes pan {
0% {
    -webkit-transform: translate(0%, 0%);
}
100% {
    top: 100%;
    -webkit-transform: translate(0%, -100%);
}
}

.container {
position:relative;
width:1100px;
height:480px;
overflow:hidden;
background-color:#000;
}
.image {
position:absolute;
top: 0;
max-width:100%;
min-width:100%;
-webkit-animation: pan 5s alternate infinite linear;
animation: pan 5s alternate infinite linear;
}

Answer 1

Firefox不使用webkit，因此您的-webkit-transform不會執行任何操作。 對其進行更改以進行transform ，它應該很可能會起作用。

我為你做了一個JSFiddle

@-webkit-keyframes pan {
    0% {
        -webkit-transform: translate(0%, 0%);
    }
    100% {
        top: 100%;
        -webkit-transform: translate(0%, -100%);
    }
}
@keyframes pan {
    0% {
        transform: translate(0%, 0%);
    }
    100% {
        top: 100%;
        transform: translate(0%, -100%);
    }
}