Новое в CSS 3: анимация, трансформация, переменные.
Что-то мне кажется, что в этот раз с идеями внедерения новых правил разработчики перестарались… Dave Hyatt, Dean Jackson и Chris Marrin (все трое работают в Apple) предложили внедрить в CSS 3 поддержку создания анимации, трансформацию объектов, их изменение с течением времени и ввести css-переменные.
О причине реализации возможности создания анимации они пишут:
На сегодняшний день создание анимации поддерживается лишь на языке SVG, но нет ни одной системы, котрая бы поддерживала создание анимации с помощью CSS. Поэтому наша цель – решить эту задачу внедрением особых CSS свойств, которые будут иметь значения, отвечающие за создание анимации и управление ею.
Эти значения будут описываться в селекторе keyframe:
@keyframes 'wobble' {
0 {
left: 100px;
}
40% {
left: 150px;
}
60% {
left: 75px;
}
100% {
left: 100px;
}
}
где "wobble" – название анимации, а соответствующие значения 0, 40%, 60% и 100% – определяют момент времени от общего временного интервала.
На рисунке выше приведен пример анимации элемента за 10 секунд.
Еще один вариант реализации - задание для каждого фрагмента определенной функции, управляющей отрисовкой:
@keyframes 'bounce' {
from {
top: 100px;
animation-timing-function: ease-out;
}
25% {
top: 50px;
animation-timing-function: ease-in;
}
50% {
top: 100px;
animation-timing-function: ease-out;
}
75% {
top: 75px;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}
В этом примере мы создаем анимацию с именем "bounce", имеющую 4 кадра, каждый из которых занимает 25% общего времени анимации. При этом, каждому фрагменту задана функция "ease-in" либо "easy-out". Первая отвечает за изменение отрисовки элемента внтури какой-либо области, а вторая за ее пределами. Все эти свойства управления созданием анимации исходят из идеи внедрения управления элементом во времени.
Подробней о новом свойстве создания анимации можно узнать здесь
Вторая идея, мне кажется, более обоснована – это управление положением элемента на плоскости. Вот пара примеров реализации:
div { transform: translate(100px, 100px); }
Такой код приведет к следующей трансформации элемента:
Или вот, более наглядное описание возможностей:
div {
height: 100px; width: 100px;
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}
Таким свойством я бы с удовольствием воспользовалась.
Подробно о свойствах трансформации можно прочесть здесь
И последняя фантазия разработчиков уж точно кажется немного безумной – введение css-переменных. Неужели CSS превратится в полноценный язык программирования и управления html элементами?
Примеры использования:
@variables {
CorporateLogoBGColor: #fe8d12;
}
div.logoContainer {
background-color: var(CorporateLogoBGColor);
}
@variables {
myMargin1: 2em;
}
@variables print {
myMargin1: 2em;
}
.data, div.entry {
margin-left: 30px;
margin-left: var(myMargin1);
}
Смысл этого кода таков: селектор variables определяет имя и значение переменной, которое можно в дальнейшем приписать к любому элементу. Идея все же не проработана. Зачем определять для цвета переменную, если его можно просто указать?
Прочесть
От себя лишь хочу добавить, что, на мой взгляд, создание новых свойств CSS 3 должно быть основано, прежде всего, на запросах вебмастеров, а не только на идеях супер-специалистов из крупных компаний. Может создать кампанию: "Вебмастер, даешь идеи для СSS 3" ?
Dmoz
> Идея все же не проработана. Зачем определять для цвета > переменную, если его можно просто указать?
все просто. если вы в 10 местах напишите не цвет а переменную, то потом достаточно в 1 месте поменять значение переменной, чтобы везде цвет изменился.
Цитировать
Не вижу смысла. CSS должны остаться средством для верстки и позиционирования элементов на странице. Не более. Лучше бы они позаботились о реализации полной поддержки CSS3 во всех браузерах(не говоря уже про CSS2).
Цитировать
@Arm0:
если интересено продолжение этой баталии, то можете зайти :) Мой ник там habratchanka. На последние мои агргументы никто так и не решился ответить..
Цитировать
Как я уже неоднократно писал и у себя в блоге и на том же Хабре – вопрос об анимации и т.д. было решено включит в перечень на обсуждение!!!…. и то не как приоритетную задачу – читайте внимательно официальные сообщения.
Цитировать
Довольно интересно … мне понравилось … хотя в этом нет нобходимости, как мне кажется.
Мона для этих целей испольовать java script или на худой конец flash… поддерживаю brezenix
Цитировать
Я поддерживаю новые разработки. Не думаю что они помешают CSS остаться средством верстки. Каждый будет использовать новые функции по мере своих знаний. Главное чтобы все браузера нормально понимали.. как сказали выше)
Цитировать
Очень не хватает многослойных background’ов. А то приходится элементы очень часто оборачивать, чтобы добиться какой-то универсальности.
Цитировать
Помоему анимация в css ни к чему, а вот трансформация очень даже кстати этож одной кортинкой можно всё чё надо сделать, тока ещё бы crop и ваще шикарно
Цитировать
2 терапи “crop и ваще шикарно”
согласен, и еще для целей упрощения работы с файломи в стиле patchwork, хранящими много изобращений, было бы удобно
длины кусочков хранить в переменных и их сложением получать координаты нужного куска
эх мечты
Цитировать
ЗАЧЕМ АНИМИРОВАТЬ Обекты страницы када можно анимацыи делать в флэш или денамические оекты в Java script
Цитировать
анимация в css не приживется
этот эксперимент так и останется “широко известным в узких кругах”
хе хе хе
Цитировать