Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
Каскадные таблицы стилей
Концепции
Философии
Инструменты
Сравнения

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

История [ править ]

В то время как псевдокласс :hoverиспользовался для создания элементарных анимаций в течение многих лет, расширения CSS в области анимации были минимальными до конца 2000-х годов. Еще в 2007 году WebKit объявил о своем намерении включить CSS-анимацию, переходы и преобразования в качестве функций WebKit. Он также объявил о реализации как неявной, так и явной анимации с помощью CSS в феврале 2009 года. CSS-анимация также была предложена как функция CSS3, текущего проекта спецификации, управляемого Консорциумом World Wide Web (W3C).


Текущий [ править ]

Интерактивный SVG с эффектом наведения

CSS Animations - это модуль каскадных таблиц стилей. Это позволяет пользователям наводить курсор на объекты, и будет воспроизводиться анимация. В настоящее время его используют все основные поисковые системы. Несмотря на разногласия со стороны тех, кто предпочитает анимацию с помощью Javascript, тег зависания теперь широко используется в сообществе каскадных таблиц стилей.

Масштабируемая векторная графика [ править ]

Анимированный SVG с использованием CSS 3
Основная статья: SVG-анимация § SVG_animation_using_CSS

Помимо наведения , масштабируемая векторная графика поддерживает at-правило @keyframes , позволяя анимировать ограниченный набор преобразований. Firefox и Chrome использовали расширения @ -moz-keyframes и @ -webkit-keyframes соответственно до того, как @keyframes был добавлен в спецификацию CSS 3. [1]

Поддержка браузера [ править ]

По состоянию на июнь 2011 года Firefox 5 включает поддержку анимации CSS. [2] CSS-анимация также доступна как модуль в ночных сборках WebKit, а также в Google Chrome , Safari 4 и 5 и Safari для iOS (iPhone, iPod Touch, iPad), Android версий 2.x и 3.x, Internet Explorer 10+ и браузер Microsoft Edge , веб-браузер BlackBerry OS 6 с -webkit-префиксом. [3] [4] [5] Он также используется в iTunes 9 для поддержки файлов iTunes LP .

Противоречие [ править ]

На раннем этапе разработки CSS-анимации она вызывала беспокойство у тех, кто предпочитал анимацию с помощью JavaScript [6] или, в меньшей степени, языка синхронизированной интеграции мультимедиа (SMIL); другие утверждали, что это попытка Apple Inc. , главного спонсора проекта WebKit, не допустить включения Adobe Flash (и существующей Flash-анимации ) в линейку мобильных устройств iOS, использующих Safari . [7] [8] [9]Более того, хотя каскадные таблицы стилей - относительно простой в использовании язык программирования, многие программисты все еще испытывают трудности с созданием анимации. С этой проблемой несколько человек и веб-сайты разработали и создали анимацию кнопок CSS с открытым исходным кодом с кодом [10], который пользователи могут скопировать. Однако, даже несмотря на эти предыдущие разногласия, анимацию CSS можно преимущественно найти и широко использовать в Интернете.

См. Также [ править ]

  • Flash анимация
  • SVG анимация

Ссылки [ править ]

  1. ^ http://w3.org/TR/css-animations-1
  2. ^ Заметки о выпуске Firefox 5 , The Mozilla Foundation, 2011-06-21
  3. ^ Хаятт, Дэйв (2007-10-31), CSS-анимация , Surfin 'Safari
  4. ↑ Джексон, Дин (05.02.2009), CSS-анимация , Surfin 'Safari
  5. ^ правило ключевых кадров , Microsoft, 2018-11-25
  6. ^ Снук, Джонатан ( 31 октября 2007 г. ), CSS Animations in Safari , Snook.ca
  7. ^ Ким, Арнольд (06.02.2009), CSS Animation Coming to Safari, Already in iPhone. Меньшая зависимость от Flash? , MacRumors.com
  8. ^ Палмер, Роберт (2009-02-06), CSS Animation для замены Flash в MobileSafari? Вряд ли , неофициальный блог Apple
  9. ^ Феррари, Винсент (2009-02-09), Анимация CSS: замена Flash? , Apple Мысли
  10. ^ Анимация кнопок с кодом

Внешние ссылки [ править ]

  • Первоначальное предложение Apple
  • Черновик уровня 3 модуля анимации CSS на веб-сайте W3C
  • Примеры CSS-анимации
  • Обучение использованию CSS-анимации - с практическими примерами
  • v
  • т
  • е