Новое в 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» ?

    Кросс-пост: Блог для вебмастеров
    Поделиться публикацией

    Похожие публикации

    Комментарии 92
      –4
      css переменные - надеюсь от них откужутса!
        +22
        да вы что, а если у вас куча мест, где один и тот же цвет упомянут? гораздо удобнее юзать переменную
          –10
          это можно решить просто используя коменнтарии в стилях - одно из правил хорошего css кодинга. Переменные лишь увеличат вес кода.
            0
            Ерунду вы какую-то сказали..
            Проще завести 1 переменную, и в случае чего ее менять, чем листать CSS-файл, читая код, переделывать.
            К тому же 1 переменная врядли увеличит вес больше, чем комменты.
              0
              переменная = код инициализации + имя переменной в селекторе:
              @variables {
              CorporateLogoBGColor: #fe8d12;
              }

              селектор { свойство: var(CorporateLogoBGColor); }
              селектор { свойство: var(CorporateLogoBGColor); }
              селектор { свойство: var(CorporateLogoBGColor); }

              либо:
              селектор1, селектор2, селектор3 { свойство: var(CorporateLogoBGColor); }

              <strong>без переменной:</strong>
              селектор1 { свойство: значение }
              селектор2 { свойство: значение }
              селектор3 { свойство: значение }

              либо:
              /* цвет фона красный */
              селектор1, селектор2, селектор3 { свойство: значение }
              В чем преимущество?
              А если вдруг нужно у одного из селекторов поменять значение, то нужно новую переменную вводить?:
              @variables {
              CorporateLogoBGColor: #fe8d12;
              CorporateLogoBGColor2: #eee;
              }

              селектор { свойство: var(CorporateLogoBGColor); }
              селектор { свойство: var(CorporateLogoBGColor2); }
              селектор { свойство: var(CorporateLogoBGColor); }

              либо:
              селектор1, селектор3 { свойство: var(CorporateLogoBGColor); }
              селектор2 { свойство: var(CorporateLogoBGColor2); }

              <strong>без переменной:</strong>
              селектор1 { свойство: значение }
              селектор2 { свойство: новое_значение }
              селектор3 { свойство: значение }

              либо:
              /* цвет фона логотипа */
              селектор1, селектор3 { свойство: значение }
              селектор2 { свойство: новое_значение }

              и где логика?
                0
                я не против переменных, я за логику :) И если уж введут таковое, то логично из вышеуказанного использовать это:
                селектор1, селектор2, селектор3 { свойство: var(CorporateLogoBGColor); }

                Если вы хотя бы раз пользовались Css валидатором, то именно так он и поступает. Это называется оптимизированный код. И гибкость изменений он никак не ухудшает, а наоборот, упрощает. Читабельность кода - зависит от того насколько вы опытны в css вообще. И если опыт все же есть, то группировка вас только выручит.
            +2
            есле куча мест где один и тот же цвет - надо групировать селекторы! Это вам любой CSS валидатор посоветует. А внедрение переменных значительно услжниит выполнение CSS. Вот хотябы почитай здесь
              +6
              Группировка снижает читабельность кода и гибкость изменений. Этот [самый примитивный, что и говорить] метод обобщения не выдерживает никакого сравнения с удобством переменных.
                0
                1. Ты сначала почитай какие изменение это внесёт в обработчик CSS
                2. Приведи реальные примеры с использованием CSS переменных.
                  0
                  1. Какое это имеет значение? Любые дополнения в стандарте ориентированы на удобство в будущем. По-вашему, новые возможности добавлять не нужно?
                  2. Один и тот же цвет, указанный 10 раз. Бритва Оккама, все пироги. ;-)
                    0
                    так имя переменной тоже 10 раз придется указывать (10 селекторов) :)
                      +2
                      зато менять цвет, если что, придётся один раз а не 10
                        –1
                        a, b, c, d, e, f { color: white }
                        разве ты этого не знал?
                          +4
                          Знал. Но не применяю, так как это сделает код почти нечитабельным: всё описание класса находится в одном месте, а его цвета — через 150 строчек, в куче с другими какими-то классами?
                            –1
                            вот скажи мне что лучше:
                            a, b, c, d, e, f { color: white }
                            или
                            a { color: var(myvar) }
                            b { color: var(myvar) }
                            c { color: var(myvar) }
                            d { color: var(myvar) }
                            e { color: var(myvar) }
                            f { color: var(myvar) }
                            Какой из этих двух примеров правельние?
                              0
                              a, b, c, d, e, f { color: var(myvar) }

                              Слишком однобоко вы мыслите, товарищь. Но код-то более читабельный получается с переменной, да и сменить значение одной переменной для всего CSS проще имхо.
                                –4
                                А смысл объявлять переменную?!
                                  +4
                                  a { color: var(myColor) }
                                  b { background-color: var(myColor) }
                                  c { border-color: var(myColor) }
                                  Попробуйте оптимизировать.

                                  Другой пример, с которым приходится часто сталкиваться - решается проще с переменными:

                                  .sidebar { width: var(sidebarWidth) }
                                  .content { margin-left: var(sidebarWidth) }
                                  .panel { left: var(sidebarWidth); position: absolute; }
                                0
                                Не путайте примеры и реальность. Если вам так повезло и есть возможность — группируйте. Разуемеется, если есть классы a и b, в которых примерно треть описаний совпадает, их можно вынести в одно. А если в них указано по 10 свойств, и из них одна совпадает — смысла группировки нет. Ситуация усугубляется, когда классов много (а так обычно и есть) и из, допустим, a и b можно вынести одно свойство, из a и c — ещё одно. В итоге код, хоть и становится короче, время, за которое его распарсит мозг — увеличивается в разы.
                                  0
                                  тоесть качество vs читабельность?
                                  W3C выберает качество и я с ними согласен.
                                    0
                                    Где вы там качество увидели?
                                      0
                                      в том что одинаковые свойства с одинаковыми значениями должны быть сгруперованы. W3C
                                  0
                                  Правильнее второй, потому что, надеюсь, можно будет написать что-то, похожее:
                                  a { color: var(maincolor); font:var(myvar01); border: var(myvar02); }
                                  b { color: var(maincolor); font:var(myvar11); border: var(myvar12); }
                                  c { color: var(maincolor); font:var(myvar21); border: var(myvar22); }
                                  etc.

                                  При этом осмысленно группируется набор стилей для отдельных элементов и появляется гибкость при изменении сходных параметров для этих элементов.
                                  К тому же, что будет понятнее, некий абстрактный "white" который встречается в семи местах или mainBackGroundColor, встречающийся в тех же семи местах?
                                  Программисты уже давно пользуются именованными константами и переменными, чего и всем остальным желают;).
                                    +1
                                    а вот и нет:
                                    a, b, c { color: white }
                                    a { font: value; border: value}
                                    b { font: value; border: value}
                                    c { font: value; border: value}

                                    Читайте CSS спеки...
                                      0
                                      Пример приведён только для примера - не стоит за него цепляться.
                                      Если вам требуется описать большое количество элементов, у которых совпадают некоторые параметры, причём у разных элементов разные параметры, то .css-файл превратится в нечто неудобоваримое.

                                      Согласен, ваша точка зрения имеет право на жизнь, т.к. заставляет группировать большее количество элементов в одном месте, таким образом ограничивая возможности css читаемостью самого .css-файла. Плюс к тому добавляет общность в дизайн различных элементов.
                                        0
                                        В таких случаях это тоже эффективно?
                                        #myBlock0 .class1 .class2 .class3 DIV,
                                        #myBlock1 .class2 .class3 P,
                                        #myBlock2 .class5 .class6 .class7 { color }

                                        #myBlock0 .class1 .class2 .class3 DIV { ... }
                                        #myBlock1 .class2 .class3 P { ... }
                                        #myBlock2 .class5 .class6 .class7 { ... }

                                        ?
                                        а если все три правила описаны в разных файлах?

                                        К тому же если вынести переменные в отдельный файл, то можно делать цветовые схемы, к примеру. То есть не переписывать весь стиль (копи-паст с подменой цвета), менять только переменные отвечающие за цвет.
                                      +1
                                      Я думаю что луше

                                      a, b, c, d, e, f { color: var(myvar) }

                                      ;)

                                      на старнице может быть 30 цветов

                                      находясь на стрчоке 200 ты можешь вспомнить что твой цвет называеться purple shit и вставить его спокойно не листая выше и не тратив время на его поиск.

                                      Было бы оень круто, если бы добавили селектор с перменными как в пхп:

                                      $mycolor = #cccccc;

                                      .obj_1 { color: $mycolor }
                                        0
                                        цена не оправдывает средства! в переменных нет необходимости, во всяком случае я ещё не увидел дельного примера.
                                          –1
                                          вы просто писсимист
                                            0
                                            у меня на сайте порядка 10 основных цветов, все они настраиваются, кроме этого существует порядка 30 цветовых схем, которые тоже настраиваются, и множество элементов имеют цвета основанные на этих настройках, и для меня, как для разработчика, внедрение переменных очень облегчило бы управление всем этим добром, а главное дальнейшую поддержку.
                                    –5
                                    господи, зачем 10 раз менять??
                                    Ctrl+F -> Replace
                                      0
                                      простите, заминусовали потому что автозаменой никто не пользуется, и заменяете вручную? Вот это логика о_О
                                        0
                                        Да просто используя автозамену можно поменять один цвет на другой во всем проекте, даже там где не надо :) Согласитесь, неприкольно получится. Конешно и регекспы при замене использовать мона, но надо оно, если появится такой замечательный способ как переменные?
                                          0
                                          ну так по уму надо делать :) Replace all в вашем примере естественно неприемлем. Но согласитесь, если вы знаете, что вы знаете что какой-то определенный фрагмент повторяется только там где вам нужно, то не будете же вы вручную заменять - я это имела ввиду.
                                            0
                                            тут не спорю :) Но переменные рулят :)
                                          +2
                                          коли вам интересно, я поставил минус комменту т.к. считаю, что find&replace как средство для рефакторинга кода - это чудовищно

                                          "заменятель подстрок в строке" - не знает про синтаксис и семантику языка программы и используют такое только в режиме предварительного просмотра каждой замены - это глупая трата времени, когда есть (будет) возможность использовать константы

                                          разумеется, существуют такие find&replace которые aware of syntax & semantics, например, для C#, но это уже оффтопик
                                          0
                                          Если у вас несколько файлов со стилями - Ctrl+F вам не очень то поможет. Хотя конечно поможет, но проделать это придется для каждого файла. У меня например в проекте более 20 файлов стилей - конечно на продакшене они собираются в один - но на стадии разработки это все разные файлы, и внесение изменений (поменять везде цвет, к примеру) это большая головная боль.
                                      0
                                      Я ещё не виде в спеке слова Accepted! Твой пример можно реализовать и без переменных.
                                    0
                                    искать переменные по коду придется так же как и нужное значение. Группировка для того и существует, чтобы оптимизировать код. Читабельность обеспечивается комментариями.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        >> А зачем искать переменные по коду?
                                        чтобы вспомнить что она означает :) Да, плюсы есть, но если уже сейчас такие споры возникают, значит над этим свойством им еще работать и работать, дабы добиться согласия.
                                          0
                                          canvasBackgroundColor, contentPaddingBackgroundColor, statusOkColor, messageBlockWidth - где тут нужно вспоминать, что они означают? :)
                                    +1
                                    На практике часто хотелось бы задать один цвет для фона, текста, рамок... Так, что простая группировка по цвету, это очень частный случай.
                                  +7
                                  Переменным — нет, константам — да! 8)
                                    0
                                    Да, переменные в CSS ни к чему. :)
                                    Константы нужны.
                                      –1
                                      загляните в описание, там именно "variable", а не "constant"
                                      «3. Definition of a variable»
                                  +3
                                  Понимание необходимости переменных приходит с опытом. Это логично, удобно, гибко, лежит на поверхности (почему до этого хоть кто-то в рабочей группе CSS додумался только сейчас, уму непостижимо) и уж никак не безумно. ;-)
                                    –10
                                    почему до этого хоть кто-то в рабочей группе CSS додумался только сейчас, уму непостижимо
                                    тебя забыли спросить ;-)
                                      0
                                      Мы разве переходили на «ты»?
                                        +2
                                        Аргументация, кстати, блестящая.
                                          –2
                                          читай выше!
                                          0
                                          *истеричным голосом* хам! :)
                                          0
                                          "безумная" = "додумались же"
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            вот с таким применением переменных я согласна, это было бы заменой exсeption в первую очередь
                                            +1

                                            И уж совсем здорово было бы, если бы их можно было использовать в выражениях

                                            такое в CSS3 может быть будет возможно с помощью специальной функции calc
                                            в вашем случае получится
                                            min-height: calc(var(MainContainerMinHeight) - var(MainContainerPaddingTop) - var(MainContainerPaddingBottom));
                                              0
                                              "min-height: var(MainContainerMinHeight) - var(MainContainerPaddingTop) - var(MainContainerPaddingBottom)"

                                              Это да, особенно если бы из %% можно было em или px вычитать.
                                              0
                                              "в Aplle" - исправьте название Яббла

                                              Эти трое впринципе "никто" и даже если w3c это оценит и приймет, то мы сможем воспользоваться этим без фиксов лет через 6-7
                                                0
                                                Тьфу ты, бред какой...
                                                  0
                                                  не бред, это и есть web 3.0 :)
                                                    0
                                                    вебтриноля не существует
                                                      0
                                                      А как же в мечтах, фантазиях, задумках?)
                                                        0
                                                        это как коммунизм
                                                        0
                                                        Дык и веб два.ноля как стандарта не существует... просто назвали так.
                                                        Что мешает сегоднешнему Веб 2.0 завтра стать Веб 3.0... :)
                                                    +1
                                                    Такими темпами скоро все языки будут дублировать друг друга...
                                                      0
                                                      полноценные ЯП и так друг друга "дублируют" - они все эквивалентны машине Тьюринга

                                                      если CSS вдруг станет (а может, уже стал) Тьюринг-эквивалентным, то ничего страшного, думаю, не произойдет.. просто появится еще пара способов отстрелить себе ногу сделать одну и ту же фичу по-разному

                                                      это ведь не плохо само по себе, плохо когда это неправильно используют
                                                      0
                                                      А не глупо ли язык описания стилей затачивать под программирование? Имхо глупо. Да и зачем? Если, конечно, переменные и прочие "перелести" программирования будут уместны, то пожалуйста. Я пока приемуществ их использования не вижу.
                                                        0
                                                        Вот вот... например анимацию и трансформацию ещё можно допустить так как в худшем случае они не будут отображены, елементы останутса на своих местах и с своими свойствами. Есле же броузер не будет потдерживать переменные вы рискуете остатвить свои свойства без значений... ИМХО полная ерунда!
                                                          0
                                                          +1
                                                          Почти слово в слово то, что хотел я написать. Я точно ещё слишком молод ля того, чтобы понять зачем всё это нужно.
                                                            0
                                                            языки не затачивают под "программирование"

                                                            языки затачивают под задачи

                                                            пока круг задач довольно узок - такой язык называется Domain-Specific Language (aka DSL), сейчас CSS попадает под это определение

                                                            веб на месте не стоит, и задачи, которые решает стайлинг все усложняются - вместе с ними усложняется и язык, это нормально
                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                              0
                                                              Зачем это всё в CSS?
                                                              Почему нельзя через JS?
                                                              Это же новые стандарты, поддержку которых везде (в ie) не гарантируют.
                                                                0
                                                                Ну если уж совсем правильно, то это не стандарты а рекомендации. И само собой что их реализация не гарантируется производителями браузеров (вспомнить хотя бы пример, когда из-за разногласий во мнениях между W3C и производителями браузеров относительно XHTML2, последнии решили разрабатывать свой собственный стандарт HTML5).
                                                                А вот по поводу того, что перекладывать функции яваскриптов на CSS - это глупо, я с вами соглашусь.
                                                                Из предложенных нововвидений понравилась только идея с ротацией и масштабированием элементов. Анимация - это же прерогатива JS - зачем изобретать велосипед? В полезности использования переменных тоже чесно говоря сомневаюсь (лично мне и без них прекрасно живёться).
                                                                  +2
                                                                  потому что декларативность - лучше, чем императивность

                                                                  JS достаточно гибок, чтобы сделать декларативно и в нем - но тогда не будет статических проверок такого кода на консистентность перед компиляцией и все ошибки вылезут уже при исполнении скрипта (это как статическая система типов vs. duck typing)
                                                                    0
                                                                    Потому что анимация элемента на странице — это отображение, а не поведение.
                                                                    –3
                                                                    Вот зачем в карму нагадили?!
                                                                      +1
                                                                      Apple тиха атакуе галактеко?
                                                                      По-моему бредятина это уже...Выходит нафиг нам флеши с сильверлайтами и яваскриптами...
                                                                        –1
                                                                        воистину.

                                                                        имхо сворачивать надо весь этот балаган, когда 10 браузеров с 10 рендерами и багами в каждом из них

                                                                        я всеми руками и ногами за монолитную платформу с ОДНИМ майнтайнером, вроде Silverlight/MS
                                                                          0
                                                                          а можно обосновать минус? мне, правда, интересно мнение оппозиции

                                                                          я понимаю, опенсорс, светлое будущее, все такое

                                                                          но назовите мне rationale этого
                                                                        0
                                                                        Хорошая новость)
                                                                          +1
                                                                          ...клево, черт побери :))
                                                                            0
                                                                            Походу, ребята из W3C почитали книжку по WPF и то, что реализовала Microsoft теперь им не даёт покоя и они решили всё "слизать". Только вот ради WPF MS фактически с нуля WinForms переделала, а они хотят малой кровью натянуть всё это на старые стандарты. Идея, конечно, неплоха, но как программисту мне кажеться, что это всё довить ещё больше камней в огород кроссбраузерности.
                                                                              0
                                                                              WPF? WTF? Они прочитали книжку по SVG. А если быть точным, то один из них (Dean Jackson) один из создателей SVG.
                                                                                0
                                                                                Возможно. С SVG особо не знаком, но уж очень всё, на что они претендуют похоже на WPF. По крайней мере в WPF всё это окончательно сформированно и оформленно, особенно что касается анимации.
                                                                                  0
                                                                                  В SVG это сформировано и оформлено ещё 5 лет назад. Не уверен о возрасте WPF, но ни о какой новизне в любом случае речи нет.
                                                                                    0
                                                                                    WPF, конечно, младше SVG, но WPF во много много раз шире, чем SVG. Но тут речь не об этом, а о том, во что хотят превратить CSS.
                                                                              +1
                                                                              Отличный перевод. Думаю Вам стоит почитать Пепелсбея, и Вы измените своё отношение к переменным. Это на самом деле отличнейшая штука! Скорей бы их добавили...
                                                                                0
                                                                                Именно в переменных я смысла тоже не вижу, а вот в строковых константах - вполне. Т.е. скорее даже просто аналог #define.
                                                                                  0
                                                                                  По-моему, ничего плохого не произойдет если из CSS сделать что-то типа, языка программирования, если конечно весь синтаксис не измениться. Ну подумаешь появятся у языка новые возможности, разве это плохо? Никто не заставляет ими пользоваться. Можно также продолжать писать JS+CSS. Да и вообще если с помощью CSS можно будет решить решить задачи которые решаются с помощью того же JS, то это будет просто волшебно. У многих, например, отпадет нужда учить и CSS и JS.
                                                                                    0
                                                                                    программирование - всегда гуд. думаю если кто-то из верстальщиков не осиливает кодинга, ничто не помешает им оставаться в CSS2 или не использовать новый функционал в CSS3. я, как программист, за переменные, за операторы и за возможность более тонкого управления и интерактивность. думаю все эффекты отображения (имею в виду динамические эффекты) должны отойти к CSS оставив JavaScript программирование функционала. думаю тогда функциональное структурирование страниц возрастёт, а стало быть изменение их станет проще и прозрачнее...

                                                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                    Самое читаемое