Question

以下代码在JSFiddle上设置动画。但不是我的网页和Codepen。想知道错过了什么：

<div class="marquee-container">
<p class="marquee">
    <img src="http://baikalpiksamuha.com/images/uploads/image_594305088943_132137736353.jpg" />
    <img src="http://baikalpiksamuha.com/images/uploads/image_1183525799947_1406772043415.jpg" />
    <img src="http://baikalpiksamuha.com/images/uploads/image_2335497987849_2163563643106.jpg" />
    <img src="http://baikalpiksamuha.com/images/uploads/image_1183525799947_1406772043415.jpg" />
    <img src="http://baikalpiksamuha.com/images/uploads/image_594305088943_132137736353.jpg" />
</p>

风格：

.marquee-container{
    width:300px;
    height:300px;
    overflow:hidden;
}
.marquee {
    background:#e4e4e4;
    top: 0;
    position: relative;
    box-sizing: border-box;
    animation: mar 30s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}
.marquee img{
    width:300px
}

/* Make it move! */
@keyframes mar {
    0%   { top:   0 }
    40%  { top: -100% }
    50%  { top: -100% }
    90%  { top: 0% }
    100% { top: 0% }
}

Answer 1

在您提供的jsfiddle示例中，您将包含一个名为prefixfree.js的脚本，该脚本会添加跨浏览器供应商前缀。由于动画不适合您，我假设您当前正在使用需要前缀动画属性的浏览器。值得指出的是，动画在Firefox中运行良好（没有脚本）。

如果添加-webkit供应商前缀，它应该按预期工作。添加其他前缀以获得额外支持。

Updated CodePen Example

.marquee-container{
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.marquee {
    background: #e4e4e4;
    top: 0;
    position: relative;
    box-sizing: border-box;
    -webkit-animation: mar 30s linear infinite;
    animation: mar 30s linear infinite;
}

.marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.marquee img {
    width:300px
}

@-webkit-keyframes mar {
    0%   { top: 0 }
    40%  { top: -100% }
    50%  { top: -100% }
    90%  { top: 0% }
    100% { top: 0% }
}

@keyframes mar {
    0%   { top: 0 }
    40%  { top: -100% }
    50%  { top: -100% }
    90%  { top: 0% }
    100% { top: 0% }
}

<div class="marquee-container">
    <p class="marquee">
        <img src="http://baikalpiksamuha.com/images/uploads/image_594305088943_132137736353.jpg" />
        <img src="http://baikalpiksamuha.com/images/uploads/image_1183525799947_1406772043415.jpg" />
        <img src="http://baikalpiksamuha.com/images/uploads/image_2335497987849_2163563643106.jpg" />
        <img src="http://baikalpiksamuha.com/images/uploads/image_1183525799947_1406772043415.jpg" />
        <img src="http://baikalpiksamuha.com/images/uploads/image_594305088943_132137736353.jpg" />
    </p>
</div>

CSS动画不适用于CodePen或JSFiddle上的任何地方

1 个答案: