Свойство transition-timing-function | CSS справочник
CSS свойстваОпределение и применение
CSS свойство transition-timing-function используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую «разгона», так что скорость перехода может меняться в течение длительности эффекта перехода.
Допускается указывать более одного значения функций перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение функции соответствует значению (в том же порядке), которое определено в свойстве transition-property. Если список функций меньше, чем количество значений (свойств), определённых свойством transition-property, то значения функций для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше функций, чем значений, указанных в свойстве transition-property, то список функций усекается до количества значений этого свойства.
Поддержка браузерами
CSS синтаксис:
transition-timing-function:"linear | ease | ease-in | ease-out | ease-in-out | steps(int,start|end) | step-start | step-end | cubic-bezier(n,n,n,n) | initial | inherit";
JavaScript синтаксис:
object.style.transitionTimingFunction = "cubic-bezier(0.42,0,1,1)"
Значения свойства
| Значение | Описание |
|---|---|
| ease | Эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25,0.1,0.25,1). Это значение по умолчанию. |
| linear | Определяет эффект перехода с одинаковой скоростью от начала до конца. Значение эквивалентно cubic-bezier(0,0,1,1). Точка 1 расположена на 0 по оси x и по оси y, точка 2 — на 1 по оси x и по оси y. |
| ease-in | Определяет эффект перехода с медленного старта. Значение эквивалентно cubic-bezier(0.42,0,1,1). |
| ease-out | Определяет эффект перехода с медленным окончанием. Значение эквивалентно cubic-bezier(0,0,0.58,1). |
| ease-in-out | Определяет эффект перехода с медленного старта и медленным окончанием (симметричная кривая Безье). Значение эквивалентно cubic-bezier(0.42,0,0.58,1). Точка 1 расположена на 0,42 по оси x и на 0 по оси y, точка 2 — на 0,58 по оси x и на 1 по оси y. |
| cubic-bezier(n,n,n,n) | Определяет пользовательские значения в кубической функции Безье. Она допускает 4 числовых значения от 0 до 1 ( Первые два значения — координаты x и y первой точки, а вторые два значения — координаты x и y второй точки). На данном сайте вы сможете подобрать оптимальные для Вас значения. |
| steps(int,start|end) | Указывает пошаговую функцию, с двумя параметрами. Первый параметр задает число интервалов в функции (целое положительное число (больше 0)). Второй параметр является необязательным и имеет значения «start» или «end» и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр опущен, то присваивается значение «end». Значение «start» осуществляет переход в начале каждого шага, а «end» в конце каждого шага. |
| step-start | Значение эквивалентно steps(1, start). Свойство сразу принимает конечное значение. Значение свойства transition-duration (продолжительность перехода) игнорируется. |
| step-end | Значение эквивалентно steps(1, end). Свойство принимает конечное значение в конце шага (т.е. если имеется свойство transition-duration (продолжительность перехода), то оно выступит в роли задержки перехода). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Эффект перехода, используя кривую Безье в CSS</title>
<style>
div {
transition-duration : 1s; /* устанавливаем длительность эффекта перехода равнуСвойство transition-delay | CSS справочник
CSS свойстваОпределение и применение
CSS свойство transition-delay определяет, когда эффект перехода начнется (выступает в роли задержки начала эффекта).
Поддержка браузерами
CSS синтаксис:
transition-delay:"time(s/ms) | initial | inherit";
JavaScript синтаксис:
object.style.transitionDelay = "300ms"
Значения свойства
| Значение | Описание |
|---|---|
| time | Указывает число секунд(s) или миллисекунд(ms) ожидания перед тем, как эфект перехода начнется. Значение по умолчанию составляет 0 секунд (отсутствие времени ожидания). Допускается указывать более одного значения задержки перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение задержки соответствует значению (в том же порядке), которое определено в свойстве transition-property. Если список задержек меньше, чем количество значений (свойств), определённых свойством transition-property, то значения задержек эффекта перехода для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше задержек, чем значений, указанных в свойстве transition-property, то список задержек усекается до количества значений этого свойства. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Задержка эффекта перехода в CSS</title>
<style>
div {
width : 90px; /* устанавливаем ширину блока */
height : 90px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливает цвет заднего фона */
border : 5px dashed black; /* устанавливает пунктирную границу размером 5px черного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
}
div:hover {
height : 200px; /* устанавливаем высоту блока при наведении на элемент (псевдокласс :hover) */
}
.test {
transition-duration : 5s; /* устанавливаем длительность перехода равную 5 секундам */
transition-delay : 1s; /* устанавливаем задержку перехода длительностью 1 секунда */
}
.test2 {
transition-duration : 2s; /* устанавливаем длительность перехода равную 2 секундам */
transition-delay : 2s; /* устанавливаем задержку перехода длительностью 2 секундч */
}
.test3 {
transition-duration : 400ms; /* устанавливаем длительность перехода равную 400 миллисекундам (0,4 секунды) */
transition-delay : 900ms; /* устанавливаем задержку перехода длительностью 900 миллисекунд (0,9 секунды) */
}
</style>
</head>
<body>
<div class = "test">delay 1s</div>
<div class = "test2">delay 2s</div>
<div class = "test3">delay 900ms</div>
</body>
</html>
Установим, чтобы некоторые свойства получили переходный эффект и применим для них разную временную задержку:
<!DOCTYPE html>
<html>
<head>
<title>Переходные эффекты для конкретных свойств в CSS</title>
<style>
div {
width : 150px; /* устанавливаем ширину блока */
height : 120px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливаем цвет заднего фона */
border : 5px dashed black; /* устанавливаем пунктирную границу размером 5px черного цвета */
}
div:hover {
width : 100%; /* устанавливаем ширину блока при наведении на элемент (псевдокласс :hover) */
height : 200px; /* устанавливаем высоту блока при наведении на элемент */
background-color : rgba(255,0,0,.7); /* устанавливаем цвет заднего фона при Свойство transition-property | CSS справочник
CSS свойстваОпределение и применение
CSS свойство transition-property указывает имя свойства CSS для которого используется переходный эффект.
Поддержка браузерами
CSS синтаксис:
transition-property:"none | all | property | initial | inherit";
JavaScript синтаксис:
object.style.transitionProperty = "all"
Значения свойства
| Значение | Описание |
|---|---|
| all | Все свойства получат эффект перехода. Это значение по умолчанию. |
| none | Нет свойств, к которым будет применен эффект перехода. |
| property | Определяет CSS свойство /-а, для которых будет применён эффект перехода. Если указано более одного свойства, то эти свойства разделяются запятой. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Переходные эффекты для конкретных свойств в CSS</title>
<style>
div {
width : 150px; /* устанавливаем ширину блока */
height : 120px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливаем цвет заднего фона */
border : 5px dashed black; /* устанавливаем пунктирную границу размером 5px черного цвета */
}
div:hover {
width : 100%; /* устанавливаем ширину блока при наведении на элемент (псевдокласс :hover) */
height : 200px; /* устанавливаем высоту блока при наведении на элемент */
background-color : rgba(255,0,0,.7); /* устанавливаем цвет заднего фона при наведении */
}
.test {
transition-duration : 5s; /* устанавливаем длительность эффекта перехода равную 5 секундам */
transition-delay : 3s, 1s; /* устанавливаем задержку перехода (1 значение = 1 значение свойства transition-property (width), 2 значение = 2 значение свойства transition-property (height) */
transition-property : width, height; /* устанавливаем свойства, которые получат переходный эффект (свойство background-color изменит цвет сразу в отличие от перечисленных в этом свойстве значений) */
}
</style>
</head>
<body>
<div class = "test">
duration: 5s;<br>
delay: 3s, 1s;<br>
property: width, height;
</div>
</body>
</html>
Переходные эффекты для конкретных свойств в CSS (свойство transition-property).CSS свойстваСвойство transition-duration | CSS справочник
CSS свойстваОпределение и применение
CSS свойство transition-duration определяет, сколько секунд или миллисекунд эффект перехода занимает времени.
Поддержка браузерами
CSS синтаксис:
transition-duration:"time(s/ms) | initial | inherit";
JavaScript синтаксис:
object.style.transitionDuration = "5s"
Значения свойства
| Значение | Описание |
|---|---|
| time | Определяет, сколько секунд(s) или миллисекунд(ms) эффект перехода занимает времени. Значение по умолчанию составляет 0 сек (отсутствие эффекта перехода). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Эффект перехода в CSS</title>
<style>
div {
width : 70px; /* устанавливаем ширину блока */
height : 70px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливает цвет заднего фона */
border : 5px dashed black; /* устанавливает пунктирную границу размером 5px черного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
}
div:hover {
height : 200px; /* устанавливаем высоту блока при наведении на элемент (псевдокласс :hover) */
}
.test {transition-duration : 5s;} /* устанавливаем длительность перехода равную 5 секундам */
.test2 {transition-duration : 2s;} /* устанавливаем длительность перехода равную 2 секундам */
.test3 {transition-duration : 400ms;} /* устанавливаем длительность перехода равную 400 миллисекундам (0,4 секунды) */
</style>
</head>
<body>
<div class = "test">5s</div>
<div class = "test2">2s</div>
<div class = "test3">400ms</div>
</body>
</html>
Эффект перехода в CSS (свойство transition-duration).CSS свойстваЭффекты в CSS3: свойство transition
Друзья, здравствуйте.
Многие из вас любят всякие красивости. В старых версиях CSS эффекты отсутствовали как данность. Можно было использовать псевдо-свойство :hover, чтобы задать элементу новые «габариты» при наведении мыша, но все действия осуществлялись мгновенно: наводишь мыша на элемент, а он сразу становится в 2 раза больше (для примера). Для плавности приходилось использовать JavaScript.
С приходом CSS3 всё изменилось. Элементы теперь можно транформировать (к примеру, вращать), делать прозрачными, заставлять отбрасывать тень и многое другое. Но главное, появилась возможноть переложить на браузер анимацию по изменению какого-либо параметра (или сразу всех). Достигается это великолепие благодаря одному свойству — transition, которое и будем скальпировать.
Свойство применяется к элементу и имеет следующий вид:
transition: [свойство] [время анимации] [тип анимации] [задержка]
Если требуется изменить несколько свойств, просто перечисляем каждое через запятую.
transition: [свойство1] [время анимации] [тип анимации] [задержка],
[свойство2] [время анимации] [тип анимации] [задержка],
…
Чтобы стало чуть понятнее, более полный листинг:
div {
background-color:#f00;
width: 150px;
}
div:hover {
transition: width 1s linear 0s;
width: 250px;
}Изначально элемент div имеет ширину 150px. При наведении мыша ширина элемента в течение 1 секунды увеличивается до 250px.
Теперь разберём в деталях каждый из параметров.
Свойство
Это обычное CSS свойство, например, width, height, background-color и т. п., для которого осуществляется переход.
Если указать ключевое слово all, то изменение будет произведено для всех свойств.
Время анимации
Целое или дробное значение секунд или миллисекунд (s или ms), задающее продолжительность анимации.
Задержка
Задаёт отсрочку (время начала) анимации. Может принимать значения, аналогичным из предыдущего пункта — s или ms.
Тип анимации
Под этим невзрачным пунктом всё и скрывается. Разберём, для начала, предопределённые свойства.
Шаговые эффекты
Определены следующие значения:
- steps — заданное число шагов. Общий вид:
steps([число], [значение])
[число] — сколько раз изменятся свойства. Например, если начальная ширина имеет значение 50px, а конечная — 150px, то при 2 шагах, на каждом шаге к начальному значению будет добавлять по 50px: шаг № 1 — 100px, шаг № 2 — 200px.
[значение] — одно из ключевых слов — start или end. Принципиальное отличие заключается во времени приращения. Допустим, время равняется двум секундам. Для start приращение применяется в начале каждого тика, для end — в конце. Если непонятно, поэкспериментируйте с формой ниже. - step-start — анимация отсутствует, свойство немедленно принимает конечное значение (аналогично простому :hover без данного свойства). Соответствует steps(1, start).
- step-end — анимация отсутствует, свойство принимает конечное значение при окончании заданного времени анимации. Соответствует steps(1, end).
Собственная функция
Примечательно, что она всего одна — cubic-bezier. Однако за такой простотой и скрывается вся мощь. Вызов функции имеет вид:
cubic-bezier(x1, y1, x2, y2)За основу движения берётся кубическая кривая Безье. Вообще, для построения этой линии нужно 8 точек. Но 4 у нас есть: 2 начальное положение, условно обозначаемое [0,0], 2 конечное — [1,1]. Остальные точки являются промежуточными. x1 и x2 — время, в интервале от нуля до единицы, где одному соответствует время анимации (то значение, которое задали). А вот y1 и y2 могут принимать любые величины, при этом 0 — исходное значение свойста, 1 — окончательное.
Углубляться в принцип построения нет смысла — кому интересно, могут почитать статью на Вики.
Предопределённые эффекты
Удивительно, но указанные значения являются вариациями на основе cubic-bezier.
- linear — равномерная скорость. В точности соответствует cubic-bezier(0, 0, 1, 1). Например, если начальная ширина элемента равна 20px, а конечная — 30px, время анимации задано как 1 секунда, то такждые 100 миллисекунд ширина элемента будет изменяться на 1 пиксель.
ease — медленное начало анимации с последующим ускорением и повторным замедлением в конце. Соответствует cubic-bezier(0.25, 0.1, 0.25, 1).
ease-in — медленное начало анимации с ускорением в конце. Соответствует cubic-bezier(0.42, 0, 1, 1).
ease-out — быстрое начало анимации с замедлением в конце. Соответствует cubic-bezier(0, 0, 0.58, 1).
ease-in-out — медленное начало и окончание с быстрой «серединой». Соответствует cubic-bezier(0.42,0,0.58,1).
cubic-bezier в разрезе
И вот мы начитались теории. Однако лучше один раз увидеть, чем сто раз представить, как всё работает.
Форма ниже позволит наглядно представить, как выглядит конечный эффект. По горизонтали отмечается время, по вертикали — степень изменения свойства. Значения 0 соответствуют началу, 1 — концу (финальной установке).
По вертикали значениям y разрешается выходить за границы «единичного квадрата». А это значит, что свойство может изменяться сверх заданных границ, и даже в какой-то момент времени возвращаться вплоть до исходного состояния и даже дальше.
Дополнительно задать время анимации и эффект, просмотреть, что получится, можно с помощью кнопки «Применить эффект». На примере «раскачки» хорошо видно, как размеры блока во время анимации выходят за предопределённые границы (меньше начального и больше конечного значений).
Цветом циан (морской волны) отмечена первая точка из доступных (x1,y1), жёлтым — вторая точка (x1,y1). Числа в блоках рядом — соответствующие значения. В общем, экспериментируйте.
Элемент не поддерживаетсяВремя
Продвижение
0,0
1,1
Всё это должно работать в браузерах Firefox, Chrome, новых Opera и Internet Explorer 10+.
Если есть вопросы — велкам в комментарии.
Автор публикации
2 061не в сети 3 дня
x64 (aka andi)
Комментарии: 2885Публикации: 405Регистрация: 02-04-2009
Загрузка…CSS свойство transition
Свойство transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства. По существу это означает простейшую анимацию. Например, если ссылка должна менять цвет при наведении на неё курсора, то можно реализовать постепенный переход от одного цвета к другому, вместо моментального изменения. В обоих случаях будет осуществляться переход от одного цвета к другому, но с помощью transition переход можно сделать постепенным. Если браузер не предоставляет поддержку данного свойства, то изменение будет моментальным.
Свойство transition устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.
Примечание: Свойство transition является короткой записью для определения значений четырех свойств: transition-property, transition-duration, transition-timing-function и transition-delay. Следует всегда указывать значение для свойства transition-duration, так как, если не указать это значение, то продолжительность перехода будет равна нулю и никакого эффекта не будет.
CSS синтаксис
transition: transition-property transition-duration transition-timing-function transition-delay | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| transition-property | Определяет CSS свойство, для которого будет применён эффект перехода. |
| transition-duration | Определяет продолжительность эффекта перехода в секундах (s) или миллисекундах (ms). |
| transition-timing-function | Определяет кривую скорости для эффекта перехода. |
| transition-delay | Определяет задержку, когда начнётся эффект перехода. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример
Сделаем, чтобы при наведении мышки на элемент <div>, он плавно менял свою ширину со 100px до 300px
div {
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1-6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
Плавные переходы в CSS3.
Вы здесь: Главная — CSS — CSS3 — Плавные переходы в CSS3.
Всем здравия! В этой статье мы разберём, как делать плавные переходы на CSS3, используя свойство transition.
Давайте подумаем, как сделать, чтобы, например, при наведении на какой-нибудь блок, он менял цвет текста, фона и тени плавно? Думаю, что многие сейчас ответят, что без скриптов тут не обойтись, но это не так! На помощь нам приходит свойство transition. Давайте поговорим, какие есть параметры у этого свойства.
transition-property: background;
transition-duration: 2s;
transition-delay: 1s;
transition-timing-function: ease;
В transition-property мы должны указать, что именно мы хотим анимировать. Например, background. Если вы хотите анимировать сразу все свойства css, то задайте значение all.
transition-duration задаёт время, которое будет длиться анимация. В нашем случае 2 секунды.
transition-delay задаёт задержку перед анимацией. Т.е. анимация произойдёт не сразу, а лишь спустя 1 секунду в нашем случае.
Теперь поговорим о transition-timing-function. Он может иметь несколько значений:
- linear — эффект, при котором анимация будет длиться с одинаковой скоростью
- ease — эффект, при котором анимация начнётся медленно, затем ускорится, а в конце снова замедлится
- ease-in — эффект с замедленным началом
- ease-out — эффект с замедленным концом
- ease-in-out — эффект с замедленным началом и концом
- cubic-bezier(n,n,n,n) — тут можно указать какие-нибудь свои значения от 0 до 1
Чтобы не рассписывать всё так длинно, есть сокращённая форма
transition: background 2s ease 1s;
Думаю, тут всё понятно. Сначала указываем, что мы анимируем, потом сколько времени будет длиться анимация, какой эффект применять и задержка перед анимацией(её может и не быть).
Мы рассмотрели свойство transition и теперь давайте закрепим наши знания на практике. Для этого анимируем div.
HTML разметка<html>
<head>
<title>transition</title>
<meta charset="utf-8">
</head>
<body>
<div>Кнопка клац!</div>
</body>
</html>
Теперь зададим ему стили, а затем я поясню
.block {
width: 110px;
padding: 15px 3px;
background: #ccc;
color: #fff;
text-align: center;
border-radius: 7px;
font: 17px "Tahoma";
}
Вот, что у нас получилось:
Теперь зададим стили при наведении
.block:hover {
background: #fafafa;
color: #ccc;
box-shadow: 1px 3px 5px #ccc;
}
Сейчас стили меняются, но не плавно, а резко. Чтобы это исправить, добавим только что изученное свойство transition.
.block: hover {
/* ... стили */
transition: all .5s ease-in-out;
}
Теперь при наведении стили будут меняться плавно, но когда вы отведёте мышку, то стили вернутся на первоначальные значения резко. Чтобы это исправить, добавим transition также к нашему блоку.
.block {
/* ... стили */
transition: all .5s ease-in-out;
}
На этом всё для этой статьи. Обязательно попробуйте придумать себе какой-нибудь пример и сделать его, чтобы закрепить знания, которые вы получили сейчас. Удачи!
-
Создано 09.04.2014 18:01:18 -
Михаил Русаков
Создано 09.04.2014 18:01:18
Михаил РусаковКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
