Простой пример
Хвост, который размахивает собакой
Изначально разработанные исключительно командой,
работавшей над движком WebKit для Safari, CSS‑переходы теперь стали спецификацией в состоянии рабочий черновик в W3C. (У CSS‑трансформаций и CSS‑анимаций похожее происхождение; о них мы поговорим в главах 4 и 6 соответственно.)
Это хороший пример того, как новшества браузеров становятся частью потенциального стандарта. Потенциального, потому что на сегодняшний день это всего лишь черновик. Однако Opera недавно добавила поддержку CSS‑переходов в версии 10.5 и была обещана их поддержка в Firefox 4.0. Иными словами, хоть это и черновая спецификация, которая развивается, она достаточно стабильна, чтобы Opera и Firefox воспринимали ее всерьез и добавляли поддержку для нее. Что важнее всего, CSS‑переходы больше не относятся к проприетарным экспериментам Safari.
Давайте посмотрим на то, как работают переходы. Как и свойства CSS3, о которых говорилось в первой главе, я дам лишь определения и покажу основной синтаксис, чтобы у читателя было ясное понимание того, как работают переходы. Позже мы будем делать разнообразные классные штуки, пользуясь переходами, чтобы довести до блеска примеры из следующих глав, и будет ясно, как переходы становятся частью общей композиции.
Что такое CSS‑переходы
Мне нравится воспринимать CSS‑переходы как масло, сглаживающее изменения значений в стилевых таблицах, вызванные действием пользователя: когда он наводит курсор на объект, нажимает на него или выделяет его. В отличие от настоящего масла переходы не полнят – они представляют собой лишь несколько простых правил, добавляемых в таблицу стилей, которые улучшают определенные события в дизайне сайта.
W3C объясняет CSS‑переходы достаточно просто (http:// bkaprt.com/css3/3/)[4]:
CSS‑переходы позволяют делать так, чтобы изменения значений CSS‑свойств происходили плавно в течение указанного интервала времени.
Это сглаживание анимирует изменение значения CSS, вызванное нажатием мыши, переходом в состояние focus или active или любым изменением элемента (включая изменение классов элемента).
Начнем с простого примера: наложим переход на изменение фона ссылки. Когда пользователь будет наводить на ссылку, цвет ее фона будет меняться, и мы применим переход, чтобы сделать это изменение плавным. Такого эффекта раньше можно было добиться исключительно средствами Flash или JavaScript, но теперь его можно сделать, написав лишь несколько строчек на CSS.
Разметка состоит исключительно из одной ссылки:
<a href="#» class=»foo">Transition me!</a>
Теперь мы объявим неактивное состояние ссылки с небольшим отступом и светло‑зеленым фоном и затем укажем темно‑зеленый цвет при наведении (рис. 2.01):
a.foo {
padding: 5px 10px;
background: #9c3;
}
a.foo: hover {
background: #690;
}
Рис. 2.01. Обычное состояние ссылки и: hover
Теперь наложим переход на это изменение. Переход сгладит и анимирует изменение в течение указанного промежутка времени (рис. 2.02).
Рис. 2.02. Печатная страница – не лучший способ показать анимированный переход, но на этой картинке попытались сделать именно это: плавный переход от светло– зеленого к темно‑зеленому фону
Ради компактности будем использовать только те браузерные префиксы, которые сейчас работают в браузерах на движке WebKit (это Safari и Chrome). Позже добавим префиксы для Firefox и Opera.
a.foo {
padding: 5px 10px;
background: #9c3;
‑webkit‑transition‑property: background;
‑webkit‑transition‑duration: 0.3s;
‑webkit‑transition‑timing‑function: ease;
}
a.foo: hover {
background: #690;
}
В этом коде можно увидеть три составляющих перехода:
• transition‑property – свойство, на которое будет накладываться переход (в этом случае – свойство background);
• transition‑duration – продолжительность перехода (0,3 с);
• transition‑timing‑function – как быстро переход осуществляется с течением времени (ease).
Временные функции (мне следовало быть внимательнее на уроках математики)
Значение временной функции позволяет менять скорость перехода с течением времени одним из шести способов: ease , linear , ease‑in , ease‑out , ease‑in‑out и cubic‑bezier , который позволяет определить произвольную временную кривую.
Если вы, как и я, проспали все школьные уроки геометрии, не беспокойтесь. Я советую просто подставить каждое значение по очереди и увидеть, чем они отличаются друг от друга.
Продолжительность перехода в этом примере так мала, что сложно различить все шесть способов. Для более длительных анимаций выбранная временная функция становится важным параметром, так как есть время заметить изменение скорости на протяжении анимации.
Если сомневаетесь, знайте: значения ease (значение по умолчанию) или linear прекрасно подходят для коротких переходов.