CSS Transition

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.


  • transition-property

  • transition-duration

  • transition-timing-function

  • transition-delay


CSS Code:

.box {

    border-style: solid;

    border-width: 1px;

    display: block;

    width: 100px;

    height: 100px;

    background-color: #0000FF;

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

    transition: width 2s, height 2s, background-color 2s, transform 2s;



.box:hover {

    background-color: #FFCCCC;

    width: 200px;

    height: 200px;

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);