Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Свойства CSS
align-content align-items align-self animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility 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-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 box-sizing caption-side clear clip color column-count column-gap column-rule column-rule-color column-rule-style column-rule-width columns column-span column-width content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight height justify-content @keyframes 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 order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right table-layout text-align text-decoration text-indent text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

transition-timing-function

Поддержка браузерами

12.0+ 10.0+ 16.0+ 26.0+ 12.1+ 6.1+

Описание

CSS свойство transition-timing-function используется для описания того, как расчитываются промежуточные значения определённого CSS свойства, т.е. анимация перехода происходит с разной промежуточной скоростью за определённое время, например, анимация начинается медленно, затем ускоряется и в конце опять замедляется.

Свойство использует математическую функцию, называемую кубической кривой Безье, чтобы сделать кривую скорости. Функции можно передать собственные значения, или использовать предопределённые ключевые слова.

Допускается указывать более одного значения, через запятую. Каждое новое значение применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список значений меньше, чем количество свойств в transition-property, значения для оставшихся свойств начнут применяться по второму кругу. Если список значений больше, чем указано свойств, то список просто усекается до нужного количества значений.

Значение по умолчанию: ease
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.transitionTimingFunction="linear"

Синтаксис

transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|inherit;

Значения свойства

Значение Описание
ease Анимация перехода начинается медленно, затем немного ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25, 0.1, 0.25, 1).
linear Анимация происходит с одинаковой скоростью от начала и до конца. Значение эквивалентно cubic-bezier(0, 0, 1, 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).
step-start Плавная анимация отсутствует. Определённые свойства сразу принимают конечное значение. Если используется данное значение, то указывать продолжительность анимации перехода не нужно, так как в этому случае она игнорируется.
step-end Плавная анимация отсутствует. Определённые свойства находятся в начальном состоянии, а когда заданное время (продолжительность) проходит, свойства сразу принимают конечное значение. В данном случае, если указана продолжительность, она действует как задержка перед изменением значения.
steps(n, указание) Ступенчатая функция, имеющая заданное число шагов. Она принимает два аргумента. Первый аргумент указывает количество шагов, за которое функция выполнит пошаговую анимацию, аргумент должен быть целым положительным числом. Второй аргумент является не обязательным, он должен быть одним из двух допустимых значений "start" или "end". Аргумент определяет момент интервала, в которой произойдёт конечное изменение значения свойства. Если указано значение "start" последний шаг будет выполнен к концу указанной продолжительности, если указано значение "end" последний шаг будет выполнен после указанной продолжительности для анимации перехода. Если второй аргумент не указан, по умолчанию будет использоваться значение "end". Эту функцию иногда называют "лестничной".
cubic-bezier(n,n,n,n) Математическая функция, определяющая, как быстро изменяется анимация перехода во время указанной продолжительности. Функция позволяет вручную установить значения для кривой ускорения. Она принимает 4 числовых аргумента - числа с плавающей точкой.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    .animation_box {
      border: 1px solid black;
      padding: 15px;
      margin: 20px;
	  }
    .elem {
      background: red;
      color: white;
      width: 190px;
      padding: 5px 0 5px 0;
      text-indent: 5px;
      margin: 5px 0;
      transition: width 2s;
    }
    .animation_box:hover .elem {
      width: 100%;
    }
  </style>
</head>
<body>

  <p>Чтобы увидеть результат анимации перехода наведите курсор мыши на контейнер ниже.</p>
  <div class="animation_box">
    <div class="elem" style="transition-timing-function: ease">ease</div>
    <div class="elem" style="transition-timing-function: linear">linear</div>
    <div class="elem" style="transition-timing-function: ease-in">ease-in</div>
    <div class="elem" style="transition-timing-function: ease-out">ease-out</div>
    <div class="elem" style="transition-timing-function: ease-in-out">ease-in-out</div>
    <div class="elem" style="transition-timing-function: step-start">step-start</div>
    <div class="elem" style="transition-timing-function: step-end">step-end</div>
    <div class="elem" style="transition-timing-function: steps(6, end)">steps(6, end)</div>
    <div class="elem" style="transition-timing-function: cubic-bezier(0, 1.2, 1, -0.6)">cubic-bezier(0, 1.2, 1, -0.6)</div>
  </div>

</body>
</html>

Результат данного примера:

Чтобы увидеть результат анимации перехода наведите курсор мыши на контейнер ниже.

ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps(6, end)
cubic-bezier(0,1.2,1,-0.6)
    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь