[英]CSS3 animation behaves different in Firefox
This is the fiddle . 这是小提琴 。
I have searched a solution for this but didn't find one. 我已经找到了解决方案,但是没有找到。
The correct one should be the one in Chrome/Opera/Safari. 正确的应该是Chrome / Opera / Safari中的一种。
I want to show only the image from top to bottom. 我只想从上到下显示图像。
The HTML: HTML:
<div class="container">
<img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg" />
</div>
The CSS: 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;
}
Firefox doesn't use webkit why your -webkit-transform
will do nothing. Firefox不使用webkit,因此您的-webkit-transform
不会执行任何操作。 Change it to transform
and it should most likely work. 对其进行更改以进行transform
,它应该很可能会起作用。
I made a JSFiddle for you 我为你做了一个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%);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.