@keyframes marquee2 {}
在Internet Explorer 11上不起作用,也无法在Edge上完美工作。所有其他主要浏览器(例如Firefox或Chrome)的运行良好。仍然不知道破坏动画的原因是什么。为什么在与transform: translate(0, 0)
一起使用left
时动画不起作用?
演示:https://codepen.io/athimannil/full/bojlqn
body {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.container {
width: 90vw;
}
.container {
overflow: hidden;
position: relative;
height: 200px;
}
.marquee-wrap {
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-animation: marquee2 20s linear infinite;
animation: marquee2 20s linear infinite;
}
.marquee-wrap .marquee-img {
width: 200px;
padding: 0 1rem;
}
.marquee-wrap .marquee-img img {
max-width: 100%;
}
@-webkit-keyframes marquee2 {
0% {
left: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
left: 100%;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
100% {
left: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes marquee2 {
0% {
left: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
left: 100%;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
100% {
left: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
<div class="container">
<div class="marquee-wrap">
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 01" alt=""></div>
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 02" alt=""></div>
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 03" alt=""></div>
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 04" alt=""></div>
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 05" alt=""></div>
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 06" alt=""></div>
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 07" alt=""></div>
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 08" alt=""></div>
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 09" alt=""></div>
<div class="marquee-img"><img src="http://via.placeholder.com/200x200?text=Logo 10" alt=""></div>
</div>
</div>
不幸的是,或者幸运的是,我没有IE 11或EDGE可以测试,但是Caniuse.com的这些要点可能会导致您的问题
- IE10和IE11在Windows 7上有一个错误,在动画测试案例中使用时,转化变换值总是解释为像素
- IE10和IE11不支持媒体查询中的CSS密钥帧块。必须在媒体查询定义之外定义。示例
来源:https://caniuse.com/#feat=css-animation