CSS-анимации - CSS animations

Каскадные таблицы стилей
Концепции
Философии
инструменты
Сравнения

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

История

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


ток

Интерактивный SVG с помощью парить эффект

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

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

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

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

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

По состоянию на июнь 2011 года Firefox 5 включает поддержку анимации CSS.[2] CSS-анимация также доступна в виде модуля в ночных сборках WebKit, а также в Гугл Хром, Сафари 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 линейка мобильных устройств, использующих Сафари.[7][8][9] Более того, хотя каскадные таблицы стилей - относительно простой в использовании язык программирования, многие программисты все еще испытывают трудности с созданием анимации. Решая эту проблему, несколько человек и веб-сайты разработали и создали анимацию кнопок с открытым исходным кодом CSS с кодом.[10] для копирования пользователями. Однако, даже несмотря на эти предыдущие разногласия, анимацию CSS можно преимущественно найти и широко использовать в Интернете.

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

использованная литература

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

внешняя ссылка