Party

Party art.

by justjohn

HTML

<tick>
┗(-.- )┓ ┏(-.-)┓ ┏( -.-)┛
</tick>
<tick>
┗( -.-)┛ ┗(-.-)┛ ┏( -.-)┓
</tick>
<tick>
┏( -.-)┛ ┗(-.-)┛ ┗(-.- )┓
</tick>
<tick>
┏(-.- )┓ ┏(-.-)┓ ┗(-.- )┛
</tick>

CSS

tick {
  display: none;
}

tick.active {
  display: inline;
}

JavaScript

var frames = [].slice.apply(document.getElementsByTagName('tick')),
    i = 0,
    speed = 300;

var activate = (frame) => {
      frame.classList.add('active');
    },
    deactivate = (frame) => {
    	frame.classList.remove('active');
    }

activate(frames[i++]);

setInterval(() => {
  frames.forEach(deactivate);
  activate(frames[i++])

  if (i === frames.length) i = 0;
}, speed);