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)

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

CSS
Переходы

Поиск…