Добавление плавности в анимации transition CSS

Нашел статью на одном из сайтов о веб-разработке. Статья рассказывает о css анимациях.

Там было очень много интересного но мне показалось что самым практичным было вот это

.object:hover {

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

}  

То есть при наведение курсора на объект он увеличивается и соответственно при противоположном действии уменьшается. Недолго думая я решил проверить этот код. Но вот незадача код работает но он все делает резко без плавности. Проверив остальные примеры с ними была та же ситуация. Первое что я сделал это залез в исходник страницы где была эта демка о увеличении но создатель додумался в учебном примеру слить весь css код в одну строку используя странные операторы. Это же гениально!!! Хочешь научится - сиди и дешифруй. Потом я полез искать в интернете и нашел еще пачку таких же примеров но все они также не работали правильно. В конце концов я нашел вторую демку с нормальным кодом. И вот там было это

.object {

    transition: all 0.5s ease-out; /*Волшебная строка*/

}

.object:hover {

  transform: scale(1.1);

}  

После того как я вставил эту "волшебную строку" код у меня успушно заработал. Как я понимаю этот код применим ко всем анимациям transition так что он будет полезен всем кто питается анимировать свою страницу без использования JavaScript.