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

CSS анимации
CSS-анимация, уровень 1
Контра-зум, также известный как кукла зум-анимация.svg
Интерактивный SVG с эффектом наведения
Родное имя
CSS анимации
Статус Рабочий проект W3C
Впервые опубликовано 20 марта 2009 г.  ( 2009-03-20 )
Последняя версия Level 1
11 октября 2018  ( 2018-10-11 )
Предварительная версия Черновик редакции
Организация Консорциум World Wide Web
Комитет Рабочая группа CSS
Редакторы
Базовые стандарты CSS
Домен CSS
Сокращение CSS-АНИМАЦИИ-1
Веб-сайт www .w3 .org / TR / css-animations-1 /

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

История

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

Текущий

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

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

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

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

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

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

Полемика

На ранних этапах разработки CSS-анимации она вызывала беспокойство у тех, кто предпочитал анимацию с помощью JavaScript или, в меньшей степени, языка синхронизированной интеграции мультимедиа (SMIL); другие утверждали, что это попытка Apple Inc. , главного спонсора проекта WebKit, не допустить включения Adobe Flash (и существующей Flash-анимации ) в линейку мобильных устройств iOS, использующих Safari . Более того, хотя каскадные таблицы стилей - относительно простой в использовании язык программирования, многие программисты все еще испытывают трудности с созданием анимации. Решая эту проблему, несколько человек и веб-сайты разработали и создали анимацию кнопок CSS с открытым исходным кодом с кодом, который пользователи могут скопировать. Однако, даже несмотря на эти предыдущие разногласия, анимацию CSS можно преимущественно найти и широко использовать в Интернете.

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

Рекомендации

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