これがフィドルです。
これに対する解決策を検索しましたが、見つかりませんでした。
正しいものは、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;
}