Add play/pause button to looping animations

[rmathur16]

Detailed description

To keep in line with accessibility requirements, all looping animation require a play/pause button which we usually place in the lower left corner. A number of images across the IDL gallery and other ecosystem sites are missing this feature.

Is this a feature request (new component, new icon), a bug, or a general issue?
General issue

What did you expect to happen? What happened instead? What would you like to see changed?
Based on accessibility best practices for any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to play/pause the animation.

Below is the invision link where I've highlighted (in red border) the looping animations (Home & Gallery) with missing play/pause button.
Invision link:
https://ibm.invisionapp.com/share/V8O0PBW2KXR#/319785206_IDL-Home

IDL Home Page - has 1 animation which needs play/pause button. (see above invision link)
IDL Gallery page - has 7 animations which needs play/pause button. (see above invision link)

What browser are you working in?
Firefox

@sstrubberg @vpicone @sadekbazaraa