CSS
Переходы
Поиск…
Синтаксис
- переход: [переход-свойство] [время перехода] [функция-время-переход] [задержка перехода];
параметры
| параметр | подробности |
|---|---|
| переход-недвижимость | Специфический CSS свойство, значение которого изменение должно быть переведен (или) all , если все transitionable свойства нужно будет перенести. |
| Продолжительность перехода | Продолжительность (или период) в секундах ( s ) или миллисекундах ( ms ) , в течение которого переход должен иметь место. |
| переходное время функция | Функция, которая описывает, как рассчитываются промежуточные значения при переходе. Обычно используемые значения - это ease , ease-in , ease-out , ease-in-out , linear , cubic-bezier() , steps() . Более подробную информацию о различных функциях синхронизации можно найти в спецификациях W3C . |
| Переход задержки | Количество времени, которое должно было пройти до перехода, может начаться. Может быть указан в секундах ( s ) или миллисекунд ( ms ) |
замечания
Некоторые старые браузеры поддерживают только свойства transition префиксом :
-
-webkit: Chrome 25-, Safari 6-, Safari & Chrome для iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- для Android. -
-moz: Firefox 15-. -
-o: Opera 11.5-, Opera Mobile 12-.
Пример:
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
Сокращение перехода
CSS
div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}
HTML
<div></div>
Этот пример изменит цвет фона, когда div будет зависать, изменение цвета фона будет длиться 1 секунду.
Переход (длинный)
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}
HTML
<div></div>
- transition-property : указывает свойства CSS, для которых применяется эффект перехода. В этом случае div будет расширяться как по горизонтали, так и по вертикали при зависании.
- duration-duration : Определяет продолжительность времени, которое требуется выполнить переходу. В приведенном выше примере переходы высоты и ширины будут занимать 1 секунду и 500 миллисекунд соответственно.
- Функция времени перехода : задает кривую скорости эффекта перехода. Линейное значение указывает, что переход будет иметь одинаковую скорость от начала до конца.
- delay-delay : Задает время, необходимое для ожидания до начала действия перехода. В этом случае высота начнет переход сразу, тогда как ширина будет ждать 1 секунду.
кубических Безье
Функция cubic-bezier - это функция времени перехода, которая часто используется для пользовательских и плавных переходов.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
Функция принимает четыре параметра:
cubic-bezier(P1_x, P1_y, P2_x, P2_y)
Эти параметры будут отображаться в точки, которые являются частью кривой Безье :
Для кривых Безье Bzzier P0 и P3 всегда находятся в одном и том же месте. P0 находится в (0,0), а P3 - в (1,1), что означает, что параметры, переданные функции кубического безье, могут быть только между 0 и 1.
Если вы передадите параметры, которые не находятся в этом интервале, функция по умолчанию будет linear .
Поскольку кубический-безье является наиболее гибким переходом в CSS, вы можете перевести всю другую функцию синхронизации времени в функции кубического безье:
linear : cubic-bezier(0,0,1,1)
ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)
