CSS 3: анимация, трансформация, переменые

[SYN]

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% - определяют момент времени от общего временного интервала.

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

@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 {
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 определяет имя и значение переменной, которое можно в дальнейшем приписать к любому элементу.

зы - кто нить уже заюзал нововведения?
сдается мне, что мертвая тема...

 

[katta]

Я не видел, чтобы из CSS3 было заюзано много нововведений. В 3-м Firefox, конечно, поддерживается из него еще что-то, кроме Opacity, но что именно, мне неизвестно.

 

[RomeoWeb]

имхо, очередной пример раздувания кода и размеров файлов.
Если в каждом контейнере писать background-color: var(CorporateLogoBGColor); вместо background-color: #fe8d12, про отн. и абс. ед. я уже молчу, плюс объявление всех переменных наверху, то размер файлов .css\время реакции браузера в полтора-два раза больше.

 

[katta]

А если написать так?:

@variables {
c1: #fe8d12;
c2: #9966ff;
}
div.logoContainer {
background-color: var(c1);
color: var(c2);
}

=)

 

[RomeoWeb]

так, это когда переменных два десятка, а когда 3-4 файла по 200-300?
задолбаешся разгребать!