Editing CSS animations (section)

==animation tricks==
===animation-play-state===
You can set the animation to play or pause when you hover/click in the element
animation-play-state: playing;
animation-play-state: paused;

https://codepen.io/PublicationStation/pen/MzrJXR

=== animation-delay===
<code>animation-delay</code> sets when an animation starts. 

It can start when
* page is loaded: <code>0s</code>
* N seconds after the page is loaded: <code>positive number of seconds</code>
* N seconds before the page is loaded, meaning that it will already be halfway through it: <code>negative number of seconds</code>

https://codepen.io/PublicationStation/pen/BGRPry

=== animation: transform-origin===


figuring out what is the center point of an element, so that we can rotate/skew/scale it, from it center point, can be a bit tricky.
A simple solution is to 
* add in the vector drawing a circle to the center of the element
* in the SVG code see the <code>cx</code> and <code>cy</code> 
* those points will be the center of the element
* than we can simply delete the circle for our svg code.

https://codepen.io/PublicationStation/pen/MzmPEg

===animation-timing-function===
<code>animation-timing-function</code> sets how an animation progresses through the duration of each cycle.

Possible values:
* linear: same speed from start to end
* ease-in: slow at the beginning, fast/abrupt at the end
* ease-out: fast/abrupt at the beginning, slow at the end
* ease-in-out: slow at beginning and end
* steps: makes a staccato motion, between the keyframes in N number of steps: <code>steps(5)</code>