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

Css3 анимация

На рисунке выше приведен пример анимации элемента за 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-переменных

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


Источник:
Блог для вебмастеров



Опубликовал admin
12 Апр, Суббота 2008г.

Комментарии

Закругление углов

 

.b1,.b2,.b3,.b4,.b5,.b1 i,.b2 i,.b3 i,.b4 i,.b5 i,.b1 b,.b2 b,.b3 b,.b4 b,.b5 b,.b1 q,.b2 q,.b3 q,.b4 q,.b5 q{height:1px;font-size:1px;overflow:hidden;display:block;border-style:solid;border-width:0 1px;}.b1{background:#EBEEF0;border:none;margin:0 2px;}.b1 b{background:#B8C3C8;border-color:#CBD3D7;margin:0 1px;}.b2{border-color:#D6DCDF;margin:0 1px;}.b2 b{border-color:#B8C3C8;}.b2 i{border-color:#E4E8EA;}.b2 q{border-color:#F7F8F9;}.b3{border-color:#EBEEEF;}.b3 b{border-color:#BCC6CB;}.b3 i{border-color:#F9FAFB;}.b4{border-color:#CAD2D6;}.b4 b{border-color:#E5E9EB;}.b5{border-color:#B5C0C6;}.b5 b{border-color:#FAFBFB;}.text{border:1px solid #B0BCC2;border-width:0 1px;padding:0 11px;text-align:left;}a.log{text-decoration:none;border-bottom:dashed 1px #FFF;color:#FFF;}a:hover.log{text-decoration:none;color:#f0ebf0;}div.border_rounded{background-color:#f04e5c;-moz-border-radius:6px;-webkit-border-radius:6px;border:1px solid #FFF;width:200px;height:20px;padding:1px;}

http://www.navstar-gps.ru/




Программирование для чайников.