CODEWITHSUNDEEP
javascriptjqueryhtmlcss
2r83
2r83

Reputation: 689

make sprite animation using javascript (every 5s)

i want to make my animation runs every 5sec using js

this is my html code 

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

and this is my css code

    #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

Upvotes: 1

Views: 155

Answers (3)

JohnDotHR
JohnDotHR

Reputation: 122

Does this suite you?

<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/

Or try this one out with 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/

Upvotes: 0

Mohammad
Mohammad

Reputation: 21489

You can play animation in class, then add and remove class of element every 5 second.

setInterval(function(){
    $("div").addClass("play");
    
    setTimeout(function(){
        $("div").removeClass("play");
    }, 1000);
}, 5000);
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; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Upvotes: 1

Cyril Iselin
Cyril Iselin

Reputation: 596

It will look like:

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

I made a sample for you, have a look: http://jsfiddle.net/xgnjy8st/

Upvotes: 1

Related Questions