Ускорение и замедление перехода — постепенное изменение внешнего вида с течением времени.
Спецификации для переходов в настоящее время классифицируются как рабочий проект и, следовательно, теоретически должны использоваться с осторожностью, поскольку тонкости того, как они работают, теоретически не доработаны. Однако они являются широко используемым аспектом CSS3 и могут использоваться со значительной степенью безопасности. Переходы поддерживаются всеми основными браузерами, хотя они не будут работать в Internet Explorer версий 9 и ниже.
Функция синхронизации перехода также может быть указана как часть transition свойства shorthand.
Возможные значения
ease
Значение: ease.
Описание: быстрое ускорение, за которым следует медленное замедление. По умолчанию.
linear
Значение: linear.
Описание: постоянная скорость повсюду.
ease-in
Значение: ease-in.
Описание: постоянное ускорение.
ease-out
Значение: ease-out.
Описание: неуклонное замедление.
ease-in-out
Значение: ease-in-out.
Описание: устойчивое ускорение, за которым следует устойчивое замедление.
cubic-bezier()
Значение: cubic-bezier().
Описание: точное управление функцией синхронизации, задающее кубическую кривую Безье. Оно должно содержать четыре числа — x1, y1, x2, y2. x1 и x2 должны находиться между 0 и 1.
Пример: cubic-bezier(0.5,1.5,0.5,-0.5).
steps()
Значение: steps().
Описание: Пошаговая функция. Количество интервалов, через которые выполняется переход (а не плавные переходы предыдущих значений).
Оно должно содержать целое число, большее нуля, которое определяет количество интервалов.
При желании оно также может содержать start или end для указания, в какой момент интервала должно произойти изменение значений (по умолчанию start).
Пример: steps(5,end).
step-start
Значение: step-start.
Описание: эквивалент steps(1, start).
step-end
Значение: step-end.
Описание: эквивалент steps(1, end).
Значение: [значение], [значение]
Описание: несколько значений могут быть разделены запятыми. Они будут соответствовать по порядку аналогичным элементам, перечисленным в других свойствах перехода (таких как transition-property).
Пример: linear, ease-in, ease-out.
inherit
Значение: inherit.
initial
Значение: initial.
unset
Значение: unset.
Пример
a {
color: rgba(255,0,0,.5);
transition-property: color;
transition-duration: .3s;
transition-timing-function: linear;
}
/* Полупрозрачная красная ссылка с быстрым линейным переходом, примененная к свойству color.*/
a:hover {
color: rgba(255,0,0,1);
}
/* При наведении курсора на ссылку цвет будет становиться сплошным красным с постоянной скоростью.*/
Страницы в тему:
- Свойство CSS: transition
Все свойства CSS
all background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow caption-side clear clip color content counter-increment counter-reset cursor direction display empty-cells float font font-family font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity orphans outline outline-color outline-style outline-width overflow padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside position quotes right table-layout text-align text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-transform top transform transform-origin transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space widows width word-spacing z-index
