.wrapper
  .spinner

  
.controls
  .play play
  .pause pause
  .reverse reverse
  .play-rateM x2
  .play-rateD x0.5
View Compiled
html, body
  background: #222

.wrapper
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto
  width: 100px
  height: 100px
  perspective: 1000px
  
.spinner
  width: 100px
  height: 100px
  background: #111

.controls
  div
    padding: 1rem 2rem
    cursor: pointer
    font-family: sans-serif
    display: inline-block
    margin: 0.5rem
    background: #358
    color: white
    border-radius: 4px
    user-select: none
spinner = document.querySelector '.spinner'

pulse = (element)->
  element.animate [
    transform: 'scale(1)'
  ,
    transform: 'scale(.9)'
  ,
    transform: 'scale(1)'
  ], {
    duration: 200
  }
  

animationA = spinner.animate [
  background: 'brown'
,
  background: 'tomato'
,
  background: 'gold'
], {
  duration: 500
  iterations: Infinity
  direction: 'alternate'
}


animationB = spinner.animate [
  transform: 'rotate(0deg)'
,
  transform: 'rotate(360deg)'
], {
  duration: 2000
  iterations: Infinity
}

console.log animationB

document.querySelector('.play').addEventListener 'click', (e)->
  animationB.play()
  pulse(e.target)
  
document.querySelector('.pause').addEventListener 'click', (e)->
  animationB.pause()
  pulse(e.target)
  
document.querySelector('.reverse').addEventListener 'click', (e)->
  animationB.reverse()
  pulse(e.target)
  
document.querySelector('.play-rateM').addEventListener 'click', (e)->
  animationB.playbackRate *= 2
  pulse(e.target)

document.querySelector('.play-rateD').addEventListener 'click', (e)->
  animationB.playbackRate /= 2
  pulse(e.target)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.