/* ANIMATIONS

-webkit-animation-name: example; 
-webkit-animation-duration: 0s; 
-webkit-animation-timing-function: ease | linear ease-in ease-out ease-in-out;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 0 | infinite; 
-webkit-animation-direction: normal | reverse alternate alternate-reverse;
-webkit-animation-fill-mode: none | forwards backwards both;
-webkit-animation-play-state: running | paused;

Default value
animation: name 0s ease 0s 1 normal none running;

animation-name: example;
animation-duration: 4s;
animation-timing-function: ease | linear ease-in ease-out ease-in-out cubic-bezier(n,n,n,n);
animation-delay: 0s;
animation-iteration-count: 1 | infinite;
animation-direction: normal | reverse alternate alternate-reverse;
animation-fill-mode: none | forwards backwards both;
animation-play-state: running | paused;

SHORTHAND 
===========================================================
-webkit-animation: name duration timing delay count direction fill play;
animation: name duration timing delay count direction fill play;
*/

/* TRANSITIONS

Default value
-webkit-transition: all 0s ease 0s;

-webkit-transition-property: all;
-webkit-transition-duration: 0s;	
-webkit-transition-timing-function: ease | linear ease-in ease-out ease-in-out;
-webkit-transition-delay: 0s;

Default value
transition: all 0s ease 0s;
JavaScript syntax:	object.style.transition="all 2s"

transition-property: all; object.style.transitionProperty="width,height"
transition-duration: 0s; object.style.transitionDuration="1s"
transition-timing-function: ease | linear ease-in ease-out ease-in-out;
transition-delay: 0s; object.style.transitionDelay="2s" 
// TIME Specifies the number of seconds or milliseconds to wait before the transition effect will start

*/

/* Transition + Transformation

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
transition: width 2s, height 2s, transform 2s;

*/