transition.CSS-переходы позволяют анимировать изменения свойств. Вы задаёте свойство для анимации и определяете способ анимации. Когда свойство изменяется, браузер самостоятельно обработает это изменение и отрисует анимацию.
🚫 Однако, если попытаться анимировать свойство
display, например:
.animated {
transition: display 3s;
}
Вы обнаружите, что это не работает. Почему? Дело в том, что не все CSS-свойства можно анимировать. Свойство должно поддерживать интерполяцию своего значения, другими словами иметь диапазон промежуточных значений между двумя состояниями.
Свойство display не анимируется, потому что между
display: block; и display: none; нет промежуточных значений. Однако opacity, изменяющееся от 0 до 1, допускает промежуточные значения (например, 0.1, 0.2 и так далее) и отлично подходит для плавных переходов.💡 Таким образом мы можем переписать наш пример и использовать
opacity для плавного появления или исчезновения элемента:
.animated {
transition: opacity 3s;
opacity: 1;
}
.animated.hide {
opacity: 0;
}
🔗 Детальнее про CSS-переходы и анимируемые свойства можно прочитать на MDN:
- Использование CSS-переходов
- Анимируемые CSS-свойства