Свойство transition в CSS3

Transition в переводе с английского означает переход. Я постараюсь на простых примерах показать, как можно использовать данное свойство. А вы для себя решите где бы вы могли его использовать уже сейчас.
А начну я пожалуй с плавного изменения фона для ссылки

a.light{
    padding: 5px 10px;
    background: #7f7f7f;
    color: #ffffff;
	text-decoration:none;
	-webkit-transition-property: background;
	-moz-transition-property: background;
	-ms-transition-property: background;
    -o-transition-property: background;
    transition-property: background;
    -webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-ms-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	transition-timing-function: ease;
    }
a.light:hover {
    background: #ffffff;
    color: #000000;
    }

Как видно из примера наша ссылка меняет фон при наведении курсора мышки в течении полсекунды. Код получился громоздкий и неудобный, но как и все свойства в CSS в одно transition:

a.light{
    padding: 5px 10px;
    background: #7f7f7f;
    color: #ffffff;
	text-decoration:none;
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	-ms-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
    transition: background 0.5s ease;
        }
a.light:hover {
    background: #ffffff;
    color: #000000;
    }

Так то лучше. А теперь давайте добавим плавный переход изменения цвета нашей ссылки:

a.light{
    padding: 5px 10px;
    background: #7f7f7f;
    color: #ffffff;
	text-decoration:none;
	-webkit-transition: background 0.5s ease, color 0.4s ease;
	-moz-transition: background 0.5s ease, color 0.4s ease;
	-ms-transition: background 0.5s ease, color 0.4s ease;
    -o-transition: background 0.5s ease, color 0.4s ease;
    transition: background 0.5s ease, color 0.4s ease;
        }
a.light:hover {
    background: #ffffff;
    color: #000000;
    }

Также можно использовать свойство transition-delay, которое предназначено для задержки перехода. Как его использовать я писать не буду, вы думаю и сами уже догадались. Если нет то попробуйте его применить, дам лишь подсказку что время задержки выставляется также, как и в свойстве transition-duration.
Вот пожалуй пока и всё, что нужно для первого раза!