Когда Вы экспериментируете с анимациями CSS, полезно знать, что нельзя анимировать. В текущей спецификации нельзя изменять следующие свойства с помощью ключевых кадров или переходов:

• Прокрутка всего тега body, это делается с помощью JavaScript.

• Градиенты, хотя анимация градиентов — часть спецификации, но пока что она не поддерживается в большинстве браузеров, так что для решения задачи анимирования градиентов используются обходные пути, такие как анимирование градиентов SVG или применение JavaScript, хотя есть и способы, использующие только CSS.

• Почти все свойства, связанные с фоном, включая свойство фонового изображения, хотя свойство расположения фона можно анимировать.

• Нельзя анимировать свойство высоты элемента, если оно не задано изначально, например, если элемент растягивается в зависимости от содержимого, хотя возможно анимировать значение минимальной высоты.

Хотя для всех этих ограничений есть обходные пути, желательно с самого начала знать, что нельзя сделать с помощью CSS, чтобы не тратить лишнее время и силы на поиски несуществующей ошибки.

За дополнительной информацией можно обратится к следующим ресурсам:

• Список свойств CSS, которые можно анимировать.

• Могу ли я это анимировать — база анимируемых свойств с поиском.

• Список анимируемых свойств Mozilla Developer Network.

• Список анимируемых свойств W3C.

Перейдя по ссылкам ниже, можно увидеть примеры работы анимируемых свойств CSS:

• Анимируемые свойства от Lea Veru

• W3Schools

• Quackit

• Tutorial Republic

Автор - Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селектора атрибута
• Использование селектора псевдоэлемента
• Использование расположений CSS: значение по умолчанию «статическое»