Как работать с Transition?

Помогите разобраться с данным свойством, насколько я понял, нужно писать transition в родительском блоке, и указывать сколько времени будут происходить какие то действия, а потом еще писать в дочернем в котором собственно то что должно произойти с блоком? У меня оно почему то так и получалось, вообще был бы рад короткому, адекватному описанию данного свойства

В общем насколько я понимаю, transition указывает как должна происходить анимация у определенного объекта, в плане сколько по времени, будет ли задержка какая то, в данном случае блок будет растягиваться до 300 пикселей


div {
width: 100px;
height: 100px;
background: red;
transition:width 2s;
}

div:hover {
width: 250px;
}

div>

потом поменяй блок с стилями на этот


div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s linear 1s; /* For Safari 3.1 to 6.0 */
transition: width 2s linear 1s;
}

div:hover {
width: 300px;
}

теперь перед анимацией будет задержка в секунду