Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Ограничения анимации CSS

19 августа 2017 | Опубликовано в css | Нет комментариев »

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

 

 


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

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

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

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

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

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

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

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

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

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

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

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

• W3Schools

• Quackit

• Tutorial Republic

Автор - Dudley Storey

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

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




Коментарии запрещены.