transitions

CSS transitions give us the abilty to describe a change that is supposed to happen gradually over a given course of time

background color transition on hover/tap

#divtransitioncolorandopacity {
    border-radius: 7px;
    min-height: 100px;
    margin: 0 3em;
    background-color: lightskyblue;
    -webkit-transition: background-color 1s ease-in, opacity 1s ease-out;
    -moz-transition: background-color 1s ease-in, opacity 1s ease-out;
    transition: background-color 1s ease-in, opacity 1s ease-out;
    opacity: .7;
}
#divtransitioncolorandopacity:hover {
    background: purple;
    opacity: .95;
}

A div that shrinks width-wise on hover/tap

#divtransitionshape {
    border-radius: 7px;
    min-height: 100px;
    margin: 0 3em;
    background-color: lightgreen;
    -webkit-transition: -webkit-transform 1s ease-in-out, margin 500ms ease-in-out;
    -moz-transition: transform 1s ease-in-out, margin 500ms ease-in-out;
    transition: transform 1s ease-in-out, margin 500ms ease-in-out;
    transition-property: transform, margin;
}
#divtransitionshape:hover {
    margin: 0 6em;
}