All-About-CSS3

1. Transition ( property | duration | timing-function | delay )

   • transition-property: none|all|property|initial|inherit;
   • transition-duration: time|initial|inherit;
   • transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit; (http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition-timing-function3)
   • transition-delay: time|initial|inherit;

2. Transform

   1. 2D Transform methods

      • translate()
      • rotate()
      • scale()
      • skewX()
      • skewY()
      • matrix()

   2. Transform Properties

      • Perspective (left-right : x axis, top-bottom : y axis;https://css-tricks.com/almanac/properties/p/perspective/)

   3. 3D Transform methods

3. Animation (animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction)

   FLEXBOX:

   Properties for the Parent (flex container)

   1. display: flex;
   2. flex-direction: row | row-reverse | column | column-reverse;
   3. flex-wrap: nowrap | wrap | wrap-reverse;
   4. flex-flow: flex-direction flex-wrap;
   5. justify-content: flex-start | flex-end | center | space-between | space-around;
   6. align-items: flex-start | flex-end | center | baseline | stretch;
   7. align-content: flex-start | flex-end | center | space-between | space-around | stretch;

   Properties for the Children (flex items)

   1. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
   2. order: ;
   3. flex-grow: ; /* default 0 */
   4. flex-shrink: ; /* default 1 */
   5. flex-basis: | auto; /* default auto */
   6. align-self: auto | flex-start | flex-end | center | baseline | stretch;

   Using BrowserSync resource below.

   Resources: https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development https://css-tricks.com/snippets/css/a-guide-to-flexbox/