CSS transitions allows an element to be changed or moved smoothly, over a given time, creating simple animations.

To create a transition effect:

• The CSS property or properties to which the effect will be applied must be defined
• The transition must be given a duration in seconds (s) or milliseconds (ms) (otherwise the transition will NOT take place)
• The transition must be placed on the property in it’s initial state

/* on hover the div will expand to 100% width */
div {
    width: 50%;
    background: red;
    color: white;
    padding: 8px;
    transition: width 0.4s;
}
div:hover {
    width: 100%;
}

When you hover your cursor over the following element, it will expand to the full width of its parent.

/* on hover the background and the text will change color */
div {
    background: white;
    outline: red solid thin;
    color: black;
    text-align: center;
    padding: 8px;
    transition: all 0.4s;
}
div:hover {
    background: red;
    color: white;
}

• CSS – transition Property
  The transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
• CSS – transition-delay Property
  The transition-delay property specifies when the transition effect will start, and is defined in seconds (s) or milliseconds (ms).
• CSS – transition-duration Property
  The transition-duration property specifies how long the transition effect will take to complete, and is defined in seconds (s) or milliseconds (ms).
• CSS – transition-property Property
  The transition-property property specifies the name of the CSS property the transition effect will apply to.
• CSS – transition-timing-function Property
  The transition-timing-function property specifies the speed curve of the transition effect, allowing for the effect to change speed over its duration.