stringtranslate.com

CSS-анимация

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

История

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

Текущий

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

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

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

Помимо hover , масштабируемая векторная графика поддерживает правило @keyframes , позволяющее анимировать ограниченный набор преобразований. 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 . нд . Проверено 9 апреля 2021 г.
  2. ^ abc Джексон, Дин; Барон, Л. Дэвид; Аткинс-младший, Таб; Бертлз, Брайан; Хаятт, Дэвид; Маррин, Крис; Галино, Сильвен, ред. (2 марта 2023 г.). «CSS-анимация, уровень 1». W3C . Рабочая группа CSS . Проверено 26 марта 2023 г.
  3. ^ Барон, Л. Дэвид; Бертлз, Брайан, ред. (2 марта 2023 г.). «CSS-анимация, уровень 2». Черновики редактора рабочей группы CSS . Проверено 26 марта 2023 г.
  4. ^ Примечания к выпуску Mozilla Firefox, Mozilla Foundation, 21 июня 2011 г., заархивировано из оригинала 11 августа 2011 г. , получено 9 апреля 2021 г.{{citation}}: CS1 maint: bot: исходный статус URL неизвестен ( ссылка )
  5. ^ Хаятт, Дэйв (31 октября 2007 г.), «CSS Animation | WebKit», WebKit , Surfin 'Safari , получено 9 апреля 2021 г.
  6. ^ Джексон, Дин (05 февраля 2009 г.), «CSS Animation | WebKit», WebKit , Surfin 'Safari , получено 9 апреля 2021 г.
  7. ^ «Правило @keyframes (Internet Explorer)», Microsoft Docs , Microsoft, 25 ноября 2018 г., заархивировано из оригинала 26 ноября 2018 г. , получено 9 апреля 2021 г.
  8. ^ Снук, Джонатан (31 октября 2007 г.), CSS-анимация в Safari, Snook.ca, заархивировано из оригинала 27 января 2021 г. , получено 9 апреля 2021 г.
  9. ^ Ким, Арнольд (6 февраля 2009 г.), CSS-анимация появится в Safari, уже в iPhone. Меньше зависимости от Flash? , MacRumors.com , получено 9 апреля 2021 г.
  10. ^ Палмер, Роберт (06 февраля 2009 г.), CSS-анимация заменит Flash в MobileSafari? Маловероятно, неофициальный блог Apple, заархивирован из оригинала 9 февраля 2009 г. , получен 9 апреля 2021 г.
  11. ^ Феррари, Винсент (09 февраля 2009 г.), CSS-анимация: замена Flash? , Apple Thoughts , получено 9 апреля 2021 г.
  12. ^ ButtonAnimations (11 декабря 2019 г.). «CSS-анимация кнопок (с кодом)». Кнопка Анимации . Проверено 9 апреля 2021 г.

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

  • в
  • т
  • е