Свойство transition-property

С помощью свойства transition-property можно определить, для каких стилей элемента будет действовать переход. Можно указать одно либо несколько свойств через запятую, а можно задать отслеживание значений всех свойств сразу.

В качестве значений принимаются ключевые слова:

• /* имена свойств */ — например, если нужно плавно изменять значения свойств color и background-color, просто запишите их имена через запятую;
• all — выбрать все свойства;
• none — не выбирать никакое свойство.

Рассмотрим пример со стилизацией ссылки. Допустим, нам нужно, чтобы при наведении курсора цвет и фон ссылки плавно менялся. Запишем следующее:

a {
    display: inline-block;
    width: 200px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    background-color: #9b20ff;
    color: #fafafa;
    transition-property: color, background-color;
}
a:hover {
    color: #9b20ff;
    background-color: #c9ff20;
    letter-spacing: 2px;
}

Итак, мы указали стиль для двух состояний ссылки — начального и конечного (:hover).
Свойство transition-property добавлено к первому стилю, и в его значении содержатся названия свойств, которые мы хотим анимировать.

Но желаемого плавного перехода от цвета к цвету у нас не будет до тех пор, пока не указана длительность анимации. Поэтому давайте скорее рассмотрим следующее свойство, которое, наконец, запустит наш переход — transition-duration.