CSS-анимация

CSS-анимации
CSS-анимация, уровень 1
	Интерактивный SVG с наведения эффектом
Аббревиатура	CSS-АНИМАЦИИ-1
Родное имя	CSS-анимации
Статус	Рабочий проект W3C
Впервые опубликовано	20 марта 2009 г.
Последняя версия	Уровень 1 ; 2 марта 2023 г.
Предварительная версия	Уровень 2 ; 2 марта 2023 г.
Организация	Консорциум Всемирной паутины
комитет	Рабочая группа CSS
Редакторы	Дин Джексон ; Л. Дэвид Бэрон ; Тэб Аткинс мл. ; Брайан Бертлз ; Дэвид Хаятт ; Крис Маррин ; Сильвен Галино ;
Базовые стандарты	CSS
Домен	CSS
Веб-сайт	www .w3 .org /ТР /css-анимации-1 /

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

История

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

Текущий

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

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

Помимо 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 ]} или, в менее используемой степени, язык синхронизированной мультимедийной интеграции (SMIL); другие утверждали, что это шаг Apple Inc. , главного спонсора проекта WebKit, с целью обойти включение Adobe Flash (и существующей Flash-анимации компании ) в линейку мобильных устройств iOS , использующих Safari . ^{[ 9 ]}^{[ 10 ]}^{[ 11 ]} Более того, хотя каскадные таблицы стилей являются относительно простым в использовании языком программирования, многие программисты все еще испытывают трудности с созданием анимации. Из-за этой проблемы несколько человек и веб-сайтов разработали и создали анимацию кнопок CSS с открытым исходным кодом. ^{[ 12 ]} чтобы пользователи могли копировать. Однако, даже несмотря на предыдущие разногласия, CSS-анимацию преимущественно можно найти и широко использовать в Интернете.

См. также

Ссылки

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

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

Эта коммуникационному дизайну, статья, посвященная незавершена . Вы можете помочь Википедии, расширив ее .

[history-1] «История публикаций CSS-анимации уровня 1 — W3C» . W3C . нд . Проверено 9 апреля 2021 г.

[w3c-draft-2] Jump up to: ^а ^б ^с Джексон, Дин; Барон, Л. Дэвид; Аткинс-младший, Таб; Бертлз, Брайан; Хаятт, Дэвид; Маррин, Крис; Галино, Сильвен, ред. (2 марта 2023 г.). «CSS-анимация, уровень 1» . W3C . Рабочая группа CSS . Проверено 26 марта 2023 г.

[w3c-editor-draft-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] Ким, Арнольд (06 февраля 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 , получено 9 апреля 2021 г.

[12] КнопкаАнимации (11 декабря 2019 г.). «CSS-анимация кнопок (с кодом)» . Кнопка Анимации . Проверено 9 апреля 2021 г.

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

[ 6 ]

[ 7 ]

[ 8 ]

[ 9 ]

[ 10 ]

[ 11 ]

[ 12 ]