CSS анимации является предлагаемым модулем для каскадных таблиц стилей , что позволяет анимацию из HTML - элементов документа с помощью CSS.
CSS-анимация, уровень 1 | |
Родное имя | CSS анимации |
---|---|
Статус | Рабочий проект W3C |
Впервые опубликовано | 20 марта 2009 г. [1] |
Последняя версия | Уровень 1 11 октября 2018 г. [2] |
Предварительная версия | Черновик редакции [3] |
Организация | Консорциум World Wide Web |
Комитет | Рабочая группа CSS |
Редакторы |
|
Базовые стандарты | CSS |
Домен | CSS |
Сокращение | CSS-АНИМАЦИИ-1 |
Веб-сайт | www |
История
В то время как псевдокласс :hover
использовался для создания элементарных анимаций в течение многих лет, расширения CSS в области анимации были минимальными до конца 2000-х годов. Еще в 2007 году WebKit объявил о своем намерении включить CSS-анимацию, переходы и преобразования в качестве функций WebKit. Он также объявил о реализации как неявной, так и явной анимации с помощью CSS в феврале 2009 года. CSS-анимация также была предложена как функция CSS3, текущего проекта спецификации, управляемого Консорциумом World Wide Web (W3C).
Текущий
CSS Animations - это модуль каскадных таблиц стилей. Это позволяет пользователям наводить курсор на объекты, и будет воспроизводиться анимация. В настоящее время его используют все основные поисковые системы. Несмотря на разногласия со стороны тех, кто предпочитает анимацию с помощью Javascript, тег зависания теперь широко используется в сообществе каскадных таблиц стилей.
Масштабируемая векторная графика
Помимо наведения , масштабируемая векторная графика поддерживает at-правило @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 . nd . Проверено 9 апреля 2021 .
- ^ а б в Джексон, Дин; Барон, Л. Дэвид; Аткинс-младший, Таб; Бертлз, Брайан; Hyatt, Дэвид; Маррин, Крис; Галино, Сильвен, ред. (2018-10-11). «CSS-анимация уровня 1» . W3C . Рабочая группа CSS . Проверено 9 апреля 2021 .
- ^ Джексон, Дин; Барон, Л. Дэвид; Аткинс-младший, Таб; Бертлз, Брайан; Hyatt, Дэвид; Маррин, Крис; Галино, Сильвен, ред. (2021-01-27). «CSS-анимация уровня 1» . Черновики редактора рабочей группы CSS . Проверено 9 апреля 2021 .
- ^ Примечания к выпуску Mozilla Firefox , The Mozilla Foundation,21 июня 2011 г. , заархивировано из оригинала 12 февраля 2014 г. , получено 9 апреля 2021 г.
- ^ Хаятт, Дэйв ( 31 октября 2007 г. ), «CSS Animation | WebKit» , WebKit , Surfin 'Safari , получено 9 апреля 2021 г.
- ^ Джексон, Дин (05.02.2009), "CSS Animation | WebKit" , WebKit , Surfin 'Safari , получено 9 апреля 2021 г.
- ^ «Правило @keyframes (Internet Explorer)» , Microsoft Docs , Microsoft, 2018-11-25, архивировано из оригинала 26.11.2018 , получено 2021-04-09.
- ^ Снук, Джонатан ( 31 октября 2007 г. ), CSS Animations in Safari , Snook.ca, заархивировано из оригинала 27 января 2021 года , получено 9 апреля 2021 года.
- ^ Ким, Арнольд (06.02.2009), CSS-анимация в Safari, уже в iPhone. Меньшая зависимость от Flash? , MacRumors.com , получено 9 апреля 2021 г.
- ^ Палмер, Роберт (2009-02-06), CSS-анимация заменит Flash в MobileSafari? Вряд ли , неофициальный блог Apple , получен 2021-04-09.
- ^ Феррари, Винсент (2009-02-09), CSS-анимация: замена Flash? , Apple Мысли , получено 2021-04-09
- ^ ButtonAnimations (11.12.2019). "CSS Анимация кнопок (с кодом)" . ButtonAnimations . Проверено 9 апреля 2021 .
Внешние ссылки
- Первоначальное предложение Apple
- Примеры CSS-анимации
- Обучение использованию CSS-анимации - с практическими примерами