Question

我想使用js

每5秒运行一次动画

这是我的HTML代码

<div id="aa"></div>

这是我的css代码

    #aa{
    width: 167px;
    height: 169px;
    background-image: url("sprite.png");
    /*animation: play .2s steps(6) ;*/
}
@keyframes play {
   from { background-position:    0px; }
     to { background-position: -1002px; }
}

jsfiddle

Answer 1

看起来像：

function animation()
{
$('#overlay').fadeIn('slow').delay(1000).fadeOut('slow');
}
setInterval(animation,5000);

我为你做了一个样本，看看：http://jsfiddle.net/xgnjy8st/

Answer 2

您可以在课堂上播放动画，然后每隔5秒添加和删除元素类。

＆＃13;

<iframe src="mypage.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    Your browser doesn't support iframes
</iframe>

＆＃13;

setInterval(function(){
    $("div").addClass("play");
    
    setTimeout(function(){
        $("div").removeClass("play");
    }, 1000);
}, 5000);

＆＃13;

div {
    width: 100px;
    height: 100px;
    background: green;
}

.play {
    animation: play 1s;
}

@keyframes play {
    0% { margin-left: 0px; }
    50% { margin-left: 200px; }
    100% { margin-left: 0px; }
}

＆＃13;

Answer 3

这套房吗？

<div id="aa"></div>

#aa {
    width: 167px;
    height: 169px;
    background-image: url("http://www.w3schools.com/cssref/pineapple.jpg");
    animation: blinker 5s forwards infinite;
}

@keyframes blinker {
  50% { 
      opacity: 0.0; 
  }
}

https://jsfiddle.net/65t0ye2m/

或者用js

尝试这个

var img = document.getElementById('aa');

var interval = window.setInterval(function() {
    if (img.style.visibility == 'visible') {
        img.style.visibility = 'hidden';
    } else {
        img.style.visibility = 'visible';
    }
}, 1000);

https://jsfiddle.net/65t0ye2m/

使用javascript制作精灵动画（每5秒）

3 个答案: