Чудеса в CSS 3: анимация и переменные

Автор: Ольга

Сайт: http://www.getincss.ru

Что-то мне кажется, что в этот раз с идеями внедерения новых правил разработчики перестарались… Dave Hyatt, Dean Jackson и Chris Marrin (все трое работают в Apple) предложили внедрить в CSS 3 поддержку создания анимации, трансформацию объектов, их изменение с течением времени и ввести css-переменные.

О причине реализации возможности создания анимации они пишут:

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

Эти значения будут описываться в селекторе keyframe:

где "wobble" - название анимации, а соответствующие значения 0, 40%, 60% и 100% - определяют момент времени от общего временного интервала.

На рисунке выше приведен пример анимации элемента за 10 секунд.

Еще один вариант реализации - задание для каждого фрагмента определенной функции, управляющей отрисовкой:

В этом примере мы создаем анимацию с именем "bounce", имеющую 4 кадра, каждый из которых занимает 25% общего времени анимации. При этом, каждому фрагменту задана функция "ease-in", либо "easy-out". Первая отвечает за изменение отрисовки элемента внтури какой-либо области, а вторая за ее пределами. Все эти свойства управления созданием анимации исходят из идеи внедрения управления элементом во времени.

Вторая идея, мне кажется, более обоснована - это управление положением элемента на плоскости. Вот пара примеров реализации:

Такой код приведет к следующей трансформации элемента:

Или вот, более наглядное описание возможностей:

Таким свойством я бы с удовольствием воспользовалась.

И последняя фантазия разработчиков уж точно кажется немного безумной - введение css-переменных. Неужели CSS превратится в полноценный язык программирования и управления html элементами?

Примеры использования:

Смысл этого кода таков: селектор variables определяет имя и значение переменной, которое можно в дальнейшем приписать к любому элементу. Идея все же не проработана. Зачем определять для цвета переменную, если его можно просто указать?

От себя лишь хочу добавить, что, на мой взгляд, создание новых свойств CSS 3 должно быть основано, прежде всего, на запросах вебмастеров, а не только на идеях супер-специалистов из крупных компаний. Может создать кампанию: "Вебмастер, даешь идеи для СSS 3" ?