stringtranslate.com

CSS-анимации

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

История

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

Текущий

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

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

Анимированный SVG с использованием CSS 3

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

Поддержка браузера

По состоянию на июнь 2011 года Firefox 5 включает поддержку CSS-анимации. [4] 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-префиксом. [5] [6] [7] Она также используется в iTunes 9 для поддержки файлов iTunes LP .

Противоречие

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

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

Ссылки

  1. ^ "История публикаций CSS-анимаций уровня 1 - W3C". W3C . nd . Получено 2021-04-09 .
  2. ^ abc Джексон, Дин; Барон, Л. Дэвид; Аткинс-младший, Таб; Бертлз, Брайан; Хайатт, Дэвид; Маррин, Крис; Галино, Сильвен, ред. (2023-03-02). "CSS Animations Level 1". W3C . CSS Working Group . Получено 26.03.2023 .
  3. ^ Барон, Л. Дэвид; Бертлз, Брайан, ред. (2023-03-02). "CSS Animations Level 2". Черновики редактора рабочей группы CSS . Получено 26.03.2023 .
  4. ↑ Mozilla Firefox Release Notes, Mozilla Foundation, 21.06.2011, архивировано из оригинала 11.08.2011 , извлечено 09.04.2021{{citation}}: CS1 maint: бот: исходный статус URL неизвестен ( ссылка )
  5. ↑ Hyatt, Dave (2007-10-31), "CSS Animation | WebKit", WebKit , Surfin' Safari , получено 2021-04-09
  6. ^ Джексон, Дин (2009-02-05), "CSS Animation | WebKit", WebKit , Surfin' Safari , получено 2021-04-09
  7. ^ "Правило @keyframes (Internet Explorer)", Microsoft Docs , Microsoft, 2018-11-25, заархивировано из оригинала 2018-11-26 , извлечено 2021-04-09
  8. ↑ Snook, Jonathan (31.10.2007), CSS-анимации в Safari, Snook.ca, заархивировано из оригинала 27.01.2021 , извлечено 09.04.2021
  9. ^ Ким, Арнольд (2009-02-06), CSS-анимация в Safari, уже в iPhone. Меньше зависимости от Flash?, MacRumors.com , получено 2021-04-09
  10. ^ Палмер, Роберт (2009-02-06), CSS-анимация заменит потребность во Flash в MobileSafari? Маловероятно, The Unofficial Apple Weblog, архивировано из оригинала 2009-02-09 , извлечено 2021-04-09
  11. ^ Феррари, Винсент (2009-02-09), CSS-анимации: замена Flash?, Apple Thoughts , получено 2021-04-09
  12. ^ ButtonAnimations (2019-12-11). "Анимация кнопок CSS (с кодом)". ButtonAnimations . Получено 2021-04-09 .

Внешние ссылки

  • v
  • t
  • e