CSS - TRANSITION

    //TRANSITION
    Set into the normal tag (div) not in the hover
    /*Specific Property*/
    transition: background-color 0.5s ease;

    /*Specific Properties*/
    transition: background 0.2s ease,
              padding 0.8s linear;

    /*All Properties*/
    transition: all 0.5s ease;

    //TRANSITION PROPERTIES 
    transition: [transition-property] [transition-duration] [transition-timing-function] [];
    transition-property: background |all;
    transition-duration: 1s;
    transition-delay: 0.3s; /*time it takes to start the transition*/
    transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier
    Cubic-bezier is editable: opening dev tools and on the property transition there is a box/cube next to the type. Clic in to edit
    /* Keyword values */
    transition-timing-function: ease;
    transition-timing-function: ease-in;
    transition-timing-function: ease-out;
    transition-timing-function: ease-in-out;
    transition-timing-function: linear;
    transition-timing-function: step-start;
    transition-timing-function: step-end;

    /* Function values */
    transition-timing-function: steps(4, jump-end);
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

    /* Steps Function keywords */
    transition-timing-function: steps(4, jump-start);
    transition-timing-function: steps(10, jump-end);
    transition-timing-function: steps(20, jump-none);
    transition-timing-function: steps(5, jump-both);
    transition-timing-function: steps(6, start);
    transition-timing-function: steps(8, end);

    /* Multiple timing functions */
    transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

    /* Global values */
    transition-timing-function: inherit;
    transition-timing-function: initial;
    transition-timing-function: unset;

    //BROWSER SUPPORT
    .example {
        -webkit-transition: background-color 500ms ease-out 1s;
        -moz-transition: background-color 500ms ease-out 1s;
        -o-transition: background-color 500ms ease-out 1s;
        transition: background-color 500ms ease-out 1s;
    }