CSS Master

hand,canbepausedpart-waythroughtheplaycycleusinganimation-play-state.

Ithastwodefinedvalues:runningandpaused,anditsinitialvalueisrunning.

Let’slookatasimpleexampleofusinganimation-play-statetoplayorpausean

animation.^21 First,ourCSS:

.wobble {

animation: wobble 3s ease-in infinite forwards alternate;

animation-play-state: paused;

}

.running {

animation-play-state: running;

}

Herewehavetwodeclarationblocks:wobble,whichdefinesawobblinganimation,

andrunning,whichsetsaplaystate.Aspartofouranimationdeclaration,we’ve

setananimation-play-statevalueofpaused.Torunouranimation,we’lladdthe

runningclasstoourelement.Let’sassumethatourmarkupincludesaRun animation

buttonwithanidoftrigger:

var trigger = document.querySelector('#trigger');

var moveIt = document.querySelector('.wobble');

trigger.addEventListener('click', function() {

moveIt.classList.toggle('running');

});

UsingjQuery,thiswouldbe:

$('#trigger').on('click', function(){

$('.wobble').toggleClass('running');

});

Adding.runningtoourelementoverridestheanimation-play-statevaluesetin

.wobble,andcausestheanimationtoplay.

(^21) Somebrowserssupportaddingtheanimation-play-statevaluetotheanimationdeclaration,
butnotSafariandInternetExplorer.
218 CSS Master