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

Тема в разделе "Статьи и Co", создана пользователем raptor, 7 ноя 2008.

Статус темы:
Закрыта.
  1. raptor

    raptor Постоялец

    Регистр.:
    19 фев 2008
    Сообщения:
    70
    Симпатии:
    4
    Dave Hyatt, Dean Jackson и Chris Marrin (все трое работают в Apple) предложили внедрить в CSS 3 поддержку создания анимации, трансформацию объектов, их изменение с* течением времени и ввести css-переменные.
    источник: хттп://webkit.org/specs/CSSVisualEffects/

    О причине реализации возможности создания анимации:
    Эти значения будут описываться в селекторе 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 определяет имя и значение переменной, которое можно в дальнейшем приписать к любому элементу.
     
  2. makaron

    makaron Создатель

    Регистр.:
    28 мар 2007
    Сообщения:
    10
    Симпатии:
    0
    какой-то бред. зачем такие сложности? что-то они перегибают палку...
     
  3. antidote

    antidote

    Регистр.:
    21 янв 2008
    Сообщения:
    167
    Симпатии:
    42
    что-то попахивает попыткой перейти с flash на css3
     
  4. raptor

    raptor Постоялец

    Регистр.:
    19 фев 2008
    Сообщения:
    70
    Симпатии:
    4
    ну бред, не бред, по крайней менре имеем как минимум несколько расширенные возможности css.
    нико не заставляет этими возможностями пользоваться (я вот например еще ни разу не воспользовался), но лучше когда возможностей больше, чем когда их не хватает.
     
  5. @lex

    @lex Постоялец

    Регистр.:
    13 июн 2006
    Сообщения:
    50
    Симпатии:
    3
    редко пользуются те, кто не умеет пользоваться. А затея интересная.
     
  6. rijy

    rijy

    Регистр.:
    3 ноя 2007
    Сообщения:
    249
    Симпатии:
    82
    где-то можно увидеть рабочие примеры использования данных технологий? (по ссыле на источник не нашел)..
     
  7. Mons

    Mons

    Регистр.:
    2 апр 2006
    Сообщения:
    1.589
    Симпатии:
    916
    Зачем ? Насколько часто при создании дизайна мы делаем наимацию ? Мне за годы практики всегда по самые уши хватало стандартных возможностей. Да в css 3 много полезного уже внедрили. Римеров полно но зачастую сейчас начинают прикручивать всякую ересь которая будет использоваться единицами.
     
Статус темы:
Закрыта.