animation-play-state

by dave ho

HTML

<div id="wrap">
  <div id="sprite">
    hey hey
  </div>
</div>
<button>animate</button>
<button>tranition</button>

CSS

#wrap {
  position: relative;
  height: 300px;
  border: 5px solid black;
}


#sprite.moving {
  -webkit-animation-play-state: running;
}

#sprite.alpha {
  -webkit-animation: BALLZ 5s infinite; /* Safari 4+ */
}

#sprite {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 25px;
  left: 25px;
  -webkit-animation: MOVE 10s linear infinite;
  -webkit-animation-play-state: paused;
  color: blue;
}

button {
  margin: 20px;
  padding: 10px;
  background-color: grey;
  cursor: pointer;
}

@-webkit-keyframes MOVE {
  0% { left: 25px; }
  100% {left: 95%; }
}

@-webkit-keyframes BALLZ {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

JavaScript

var btn1 = $('button:first'),
		btn2 = $('button:last');

btn1.mouseenter(function() {
	$('#sprite').addClass('moving');
  console.log('hover');
})
.mouseleave(function() {
	$('#sprite').removeClass('moving');
  console.log('out');
});

btn1.mouseenter(function() {
	$('#sprite').addClass('moving');
  console.log('hover');
})
.mouseleave(function() {
	$('#sprite').removeClass('moving');
  console.log('out');
});

btn2.mouseenter(function() {
	$( "#sprite" ).toggleClass( 'alpha', 'addOrRemove' );
 });