 |
|
Популярные авторы:: Горький Максим :: БСЭ :: Желязны Роджер :: Борхес Хорхе Луис :: Нортон Андрэ :: Андреев Леонид Николаевич :: Толстой Лев Николаевич :: Чехов Антон Павлович :: Сименон Жорж :: Раззаков Федор Популярные книги:: The Boarding House :: Великие неторопливые короли :: Зовите меня Джо :: Дневник писателя :: Жар небес :: Авторитет :: Впечатления :: Зимнее пламя :: Цивилизация каннибалов :: Жил-был щелкунчик |
Актуальные книги для тех, кто создает сайты - CSS3 для веб-дизайнеровModernLib.Net / Интернет / Дэн Сидерхолм / CSS3 для веб-дизайнеров - Чтение (Ознакомительный отрывок) (стр. 2)
-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 прекрасно подходят для коротких переходов.
Задержка перехода Можно сделать так, чтобы переход осуществлялся не сразу после того, как срабатывает связанное с ним событие, но с некоторой задержкой. Например, сделаем так, чтобы переход цвета фона происходил через полсекунды после того, как ссылка попала в состояние hover. Такого поведения можно добиться свойством transition-delay .
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.5s;
}
a.foo: hover {
background: #690;
}
Краткая форма записи Можно существенно упростить объявление перехода (в котором нет задержки), пользуясь свойством transition. Такой синтаксис будет использоваться во всех остальных примерах этой книги. a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease;
}
a.foo: hover {
background: #690;
}
Мы получили намного более компактное правило, которое дает точно такой же результат. Если нужно добавить полусекундную задержку в краткую запись перехода, ее продолжительность ставится в конец правила: a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease 0.5s;
}
a.foo: hover {
background: #690;
}
Разумеется, эти замечательные переходы прекрасно действуют в браузерах, работающих на движке WebKit. Что насчет остальных? Поддержка в браузерах Как упоминалось ранее, переходы были изначально разработаны для движка WebKit и включены в Safari и Chrome начиная с версии 3.2, но Opera также поддерживает их начиная с 10.5 (http://bkaprt.com/css3/4/)[5]. Поддержка заявлена и в Firefox 4.0 (http://bkaprt.com/css3/5/)[6]. Учитывая поддержку переходов на сегодняшний день и в ближайшем будущем, важно перечислять все требуемые браузерные префиксы, чтобы переходы работали в большем количестве браузеров по мере появления поддержки. Полная запись перехода Ниже приводится дополненное объявление перехода, в которое добавлены префиксы -moz- и -o- , как и основное свойство transition . Как обычно, свойство без префикса ставится в самый конец, чтобы у него был наибольший вес, когда это свойство перейдет из состояния черновика в окончательную версию спецификации.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.foo: hover {
background: #690;
}
Такая запись позволяет получить сглаживание цвета фона в последних версиях Safari, Chrome и Opera, равно как и в более свежих версиях всех остальных браузеров, которые решат поддерживать переходы. Состояния перехода Я помню, что слегка запутался, когда в первый раз начал экспериментировать с переходами на CSS. Казалось, что было бы логичнее расположить объявление перехода в тот фрагмент кода, где определяется состояние :hover . Оказывается, что элемент может находиться и в других состояниях – не только в :hover – и наверняка захочется, чтобы переход происходил в каждом состоянии без дублирования кода.
Например, можно наложить переход на состояния :focus и :active . Нам не придется добавлять объявление перехода в описание каждого свойства, так как параметры перехода указываются лишь один раз – для основного состояния элемента.
Следующий пример добавляет точно такое же переключение фона для состояния :focus .
Таким образом, переход произойдет либо от того, что на ссылку наведут курсор, либо от того, что на нее будет наведен фокус (например, клавиатурой). a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.foo: hover,
a.foo: focus {
background: #690;
}
Переход нескольких свойств Предположим, что кроме цвета фона хочется также менять цвет самой ссылки и накладывать переход на это изменение. Такого эффекта можно достичь, перечисляя одновременно несколько переходов и разделяя их запятой. На каждый переход можно навесить отдельную продолжительность и собственную временную функцию (рис. 2.03). (Продолжение строки отмечено символом»).  Рис. 2.03. Обычное состояние ссылки и состояние: hover a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background.3s ease, color 0.2s linear;
-moz-transition: background.3s ease, color 0.2s linear;
-o-transition: background.3s ease, color 0.2s linear;
transition: background.3s ease, color 0.2s linear;
}
a.foo: hover,
a.foo: focus {
color: #030;
background: #690;
}
Переход всех возможных состояний Вместо того чтобы перечислять несколько свойств, к которым хочется применить переход, можно использовать значение all . Тогда переход будет наложен на все возможные свойства.
Заменим перечисление background и color на значение all . Теперь эти переходы получат одинаковую продолжительность и временную функцию.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.foo: hover,
a.foo: focus {
color: #030;
background: #690;
}
Использование all – удобный способ отследить все изменения, происходящие в состояниях :hover , :focus , :active , который избавляет от необходимости перечислять каждое свойство, нуждающееся в обозначении перехода.Примечания 1 http://www.alistapart.com/articles/tohell/ Здесь и далее прим. ред. 1, 2 |
|||||||||