Css ease in out: transition-timing-function | htmlbook.ru

Содержание

transition-timing-function | htmlbook.ru

Internet Explorer	Chrome		Opera		Safari	Firefox		Android	iOS
10.0+	4.0+	26.0+	10.5+	12.10+	3.0+	4.0+	16.0+	4.0	2.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства.

Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).

Рис. 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).
linear: Одинаковая скорость от начала и до конца.
step-start: Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
step-end: Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
steps: Ступенчатая функция, имеющая заданное число шагов.
transition-timing-function: steps(<число>, start | end)
: Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию.

cubic-bezier: Задаёт функцию движения в виде кривой Безье.

ease

ease-in

ease-out

ease-in-out

linear

step-start

step-end

steps(2, start)

Чтобы посмотреть результат действия разных значений, наведите курсор на поле ниже. Время эффект перехода установлено как 3s.

ease

ease-in

ease-out

ease-in-out

linear

step-start

step-end

steps(5, end)

cubic-bezier(0.1, -0.6, 0.2, 0)

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-timing-function</title>
  <style>
   .progress {
    background: #333; /* Фон */
    border: 2px solid #333; /* Рамка */
    height: 20px; /* Высота */
    position: relative; /* Относительное позиционирование */
   }
   .progress:hover::before{
    width: 100%;
   }
   .progress::before{
    transition-timing-function: linear;
    transition-duration: 5s;
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    height: 100%; width: 0;
    background: #FFA600; /* Фон */
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

Объектная модель

[window. ]document.getElementById(«elementID»).style.transitionTimingFunction

Браузеры

Chrome до версии 26.0, Safari и iOS поддерживают нестандартное свойство -webkit-transition-timing-function.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-timing-function.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-timing-function.

Safari поддерживает значение steps только с версии 5.1.

transition | CSS (Примеры)

Универсальное свойство transition, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay.

Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.

Переходы и Анимации

Синтаксис

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0. 5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

Значения

none: Отменяет эффект перехода.

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android поддерживают свойство -webkit-transition.
Opera до версии 12.10 поддерживает свойство -o-transition.
Firefox до версии 16 поддерживает свойство -moz-transition.

Значение по-умолчанию: all 0s ease 0s

Применяется ко всем элементам, к псевдоэлементам ::before и ::after

Спецификации

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

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>transition</title>
    <style>
      #bar {
        top: -5. 5em;
        right: 5em; /* Положение */
        padding: 0.5em; /* Поля */
        margin: 0; /* Отступы */
        position: absolute; /* Абсолютное позиционирование */
        width: 2em; /* Ширина */
        background: #333; /* Цвет фона */
        color: #fff; /* Цвет текста */
        text-align: center; /* Выравнивание по центру */
        /* Переход */
        transition: top 1s ease-out 0.5s;
      }
      #bar:hover {
        top: 0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>↓</li>
    </ul>
  </body>
</html>

Разница между легкостью перехода CSS3 и легкостью выхода

Переходы и анимация CSS3 поддерживают замедление, формально называемое «функцией времени». Общими из них ease-in, ease-out, ease-in-out, ease, и linear, или вы можете указать свой собственный , используя cubic-bezier()

ease-in будет медленно запускать анимацию и заканчивать на полной скорости.
ease-out запустит анимацию на полной скорости, затем медленно закончится.
ease-in-out начнется медленно, будет быстрее всего в середине анимации, затем медленно закончится.
easeвроде бы ease-in-out, только начинается чуть быстрее, чем заканчивается.
linear не использует ослабление.
И, наконец, вот большое описание в cubic-bezierсинтаксисе, но это, как правило , не требуется , если вы не хотите , чтобы некоторые очень точные эффектов.

По сути, ослабление означает замедление до остановки, замедление — медленное ускорение, а линейное — ни того, ни другого. Вы можете найти более подробные ресурсы в документации timing-functionпо MDN .

А если вам нужны вышеупомянутые точные эффекты, вам подойдет сайт cubic-bezier.com от Lea Verou ! Это также полезно для графического сравнения различных временных функций.

Другой, функция времени , действует как , но выполняет только конечное число шагов между началом в переходном и его конце. был наиболее полезен для меня в анимации CSS3, а не в переходах; хороший пример — загрузка индикаторов точками. Традиционно используется серия статических изображений (скажем, восемь точек, по две меняющих цвет в каждом кадре), чтобы создать иллюзию движения. С помощью анимации и преобразования вы используете движение для создания иллюзии отдельных кадров! Как весело.

steps()linearsteps()steps(8)rotate

transition — CSS: Cascading Style Sheets

Это свойство является сокращением для следующих свойств CSS:

 

переход: маржа-право 4с;


переход: margin-right 4s 1s;


переход: маржа-право 4s легкость входа-выхода;


переход: маржа-вправо 4с легкость входа-выхода 1с;


переход: край-правый 4с, цвет 1с;


переход: все 0,5 сек.


переход: наследование;
переход: начальный;
переход: не установлен;

Переход Свойство определяется как один или несколько переходов с одним свойством, разделенных запятыми.

Каждый переход одного свойства описывает переход, который должен применяться к отдельному свойству (или специальные значения все и нет ). Включает:

ноль или одно значение, представляющее свойство, к которому должен применяться переход. Это может быть любое из:
- ключевое слово нет
- ключевое слово все
- a именование свойства CSS.
ноль или один значение, представляющее функцию ослабления для использования
ноль, один или два <время> значений.Первое значение, которое может быть проанализировано как время, назначается для длительности перехода , а второе значение, которое может быть проанализировано как время, назначается для задержки перехода .

Посмотрите, как поступают, когда списки значений свойств не одинаковой длины. Короче говоря, дополнительные описания переходов, превышающие количество реально анимируемых свойств, игнорируются.

  <одиночный переход> # где <одиночный переход> = [нет | ] || <время> || <функция ослабления> || <время>, где  = all |   = linear |  | , где  = easy | легкость в использовании | легкость выхода | легкость установки | кубическая-Безье ([0,1]>, <число>, [0,1]>, <число>) <функция-синхронизация-шага> = начало-шага | шаг-конец | шаги (<целое число> [, <позиция-шага>]?), где <позиция-шага> = начало скачка | переходник | прыжок-нет | прыжок-оба | начало | конец

Простой пример

В этом примере выполняется четырехсекундный переход размера шрифта с задержкой в одну секунду, когда пользователь наводит курсор на элемент.

HTML

   Наведите на меня

CSS

  .target {
  размер шрифта: 14 пикселей;
  переход: font-size 4s 1s;
}

. target: hover {
  размер шрифта: 36 пикселей;
}

Есть еще несколько примеров переходов CSS, включенных в статью Использование переходов CSS.

Таблицы BCD загружаются только в браузере

transition-time-function — CSS: Cascading Style Sheets

Свойство transition-Timing-function CSS устанавливает способ вычисления промежуточных значений для свойств CSS, на которые влияет эффект перехода.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Это, по сути, позволяет вам установить кривую ускорения, чтобы скорость перехода могла изменяться в течение его продолжительности.

Эта кривая ускорения определяется с использованием одной для каждого свойства, которое будет изменено.

Вы можете указать несколько функций замедления; каждый из них будет применен к соответствующему свойству, как указано в свойстве свойства перехода , которое действует как список свойства перехода . Если задано меньше функций замедления, чем в списке transition-property , пользовательский агент должен вычислить, какое значение используется, повторяя список значений, пока не будет по одному для каждого свойства перехода. Если есть больше функций плавности, список обрезается до нужного размера.В обоих случаях объявление CSS остается действительным.

 
временная функция перехода: легкость;
временная функция перехода: легкость входа;
временная функция перехода: легкость выхода;
временная функция перехода: легкость входа-выхода;
временная функция перехода: линейная;
временная функция перехода: шаг-старт;
временная функция перехода: конец шага;


временная функция перехода: шаги (4, отрывной);
временная функция перехода: кубическая функция Безье (0,1, 0,7, 1,0, 0,1);


временная функция перехода: шаги (4, скачок);
временная функция перехода: шаги (10, отскок);
временная функция перехода: шаги (20, без скачка);
временная функция перехода: шаги (5, оба прыжка);
временная функция перехода: шаги (6, начало);
временная функция перехода: шаги (8, конец);


временная-переходная функция: легкость, пошаговое начало, кубический безье (0. 1, 0,7, 1,0, 0,1);


временная функция перехода: наследование;
временная функция перехода: начальная;
временная функция перехода: не задано;

Значения

<функция-фрезеровка>

Каждый представляет функцию замедления для связи с соответствующим свойством перехода, как определено в transition-property .

Нешаговые значения ключевых слов (легкость, линейность, легкость входа и т. Д.) Представляют собой кубическую кривую Безье с фиксированными четырехточечными значениями, при этом значение функции cubic-bezier () допускает непредопределенное значение.Функции пошаговой синхронизации делят время ввода на заданное количество интервалов равной длины. Он определяется количеством шагов и положением шага.

легкость

Равно кубической кривой Безье (0,25, 0,1, 0,25, 1,0). , значение по умолчанию, увеличивает скорость к середине перехода, замедляясь в конце.

линейный

Равно кубической кривой Безье (0,0, 0,0, 1,0, 1,0) , переходы с одинаковой скоростью.

простой

Равно кубической кривой Безье (0,42, 0, 1,0, 1,0) , начинается медленно, скорость перехода увеличивается до завершения.

выдвижной

Равно кубической кривой Безье (0, 0, 0,58, 1,0) , начинает быстро переходить, замедление перехода продолжается. •

легкость ввода-вывода

Равно кубической кривой Безье (0,42, 0, 0,58, 1,0) , начинает медленно переходить, ускоряется, а затем снова замедляется.

кубическая безье (p1, p2, p3, p4)

Автор определил кубическую кривую Безье, где значения p1 и p3 должны находиться в диапазоне от 0 до 1.

шагов (n, )

Отображает переход вдоль n остановок вдоль перехода, отображая каждую остановку в течение равных промежутков времени.

Например, если n равно 5, есть 5 шагов. Держится ли переход временно на 0%, 20%, 40%, 60% и 80%, на 20%, 40%, 60%, 80% и 100%, или делает 5 остановок между 0% и 100% вдоль переход или делает 5 остановок, включая отметки 0% и 100% (на 0%, 25%, 50%, 75% и 100%), зависит от того, какой из следующих условий перехода используется:

от внешнего источника: Обозначает непрерывную влево функцию, так что первый переход происходит, когда переход начинается;
перемычка: Обозначает непрерывную вправо функцию, так что последний прыжок происходит, когда анимация заканчивается;
без прыжка: Нет прыжков с обеих сторон.Вместо этого, удерживая как отметку 0%, так и отметку 100%, каждая в течение 1 / n продолжительности
переходник-оба: Включает паузы как у отметок 0%, так и у 100%, эффективно добавляя шаг во время перехода.
начало: То же, что и для запуска от внешнего источника.
конец: То же, что и перемычка .

шаг-старт

Равно шагов (1, запуск от внешнего источника)

ступенчатая

Равно шагов (1, откидной)

Некоторые анимации могут быть полезны, например, для того, чтобы помочь пользователям понять, какие действия ожидаются, показать взаимосвязи в пользовательском интерфейсе и проинформировать пользователей о том, какие действия произошли.Анимация может помочь снизить когнитивную нагрузку, предотвратить слепоту к изменениям и улучшить запоминание пространственных отношений. Однако некоторые анимации могут быть проблематичными для людей с когнитивными проблемами, такими как синдром дефицита внимания и гиперактивности (СДВГ), а определенные виды движений могут быть триггером вестибулярных расстройств, эпилепсии, мигрени и скотопической чувствительности.

Подумайте о предоставлении механизма для приостановки или отключения анимации, а также об использовании запроса с ограниченным движением мультимедиа для создания дополнительных впечатлений для пользователей, которые отказались от анимации.

  <функция-сглаживание> # где <функция-сглаживание> = линейный |  | , где  = easy | легкость в использовании | легкость выхода | легкость установки | кубическая-Безье ([0,1]>, <число>, [0,1]>, <число>) <функция-синхронизация-шага> = начало-шага | шаг-конец | шаги (<целое число> [, <позиция-шага>]?), где <позиция-шага> = начало скачка | переходник | прыжок-нет | прыжок-оба | начало | конец

Примеры Кубика-Безье

 .простота {
   временная функция перехода: легкость;
}
.easein {
   временная функция перехода: легкость входа;
}
.easeout {
   временная функция перехода: легкость выхода;
}
.easeinout {
   временная функция перехода: легкость входа-выхода;
}
.linear {
   временная функция перехода: линейная;
}
.cb {
   временная функция перехода: кубическая Безье (0,2, -2,0,8,2);
}

Примеры шагов

  .jump-start {
   временная функция перехода: шаги (5, скачок);
}
. jump-end {
   временная функция перехода: шаги (5, отрывной);
}
.jump-none {
   временная функция перехода: шаги (5, без перехода);
}
.jump-both {
   временная функция перехода: шаги (5, оба прыжка);
}
.step-start {
   временная функция перехода: шаг-старт;
}
.step-end {
   временная функция перехода: конец шага;
}

Таблицы BCD загружаются только в браузер

Основы замедления | Основы Интернета | Разработчики Google

Пол — адвокат по дизайну и исполнению

Ничто в природе не движется линейно из одной точки в другую.В действительности вещи имеют тенденцию ускоряться или замедляться по мере движения. Наш мозг запрограммирован на такое движение, поэтому при анимации вы должны использовать это в своих интересах. Естественное движение заставляет ваших пользователей чувствовать себя более комфортно в ваших приложениях, что, в свою очередь, улучшает общее впечатление.

TL; DR

Сглаживание делает вашу анимацию более естественной.
Выберите анимацию замедления для элементов пользовательского интерфейса.
Избегайте анимаций с легкостью или с легкостью, если вы не можете сделать их короткими; они, как правило, кажутся конечным пользователям вялыми.

В классической анимации термин для движения, которое начинается медленно и ускоряется, называется «медленное начало», а для движения, которое начинается быстро и замедляется, — «замедляется». Термины, которые чаще всего используются в Интернете для их обозначения, — это «облегчить» и «облегчить» соответственно. Иногда они сочетаются, что называется «легкость выхода». Таким образом, ослабление — это действительно процесс уменьшения резкости или выраженности анимации.

Ослабляющие ключевые слова

CSS-переходов и анимации позволяют выбрать тип замедления, который вы хотите использовать для своей анимации.Вы можете использовать ключевые слова, которые влияют на замедление (или тайминг , как его иногда называют) рассматриваемой анимации. Вы также можете полностью настроить динамику, что дает вам гораздо больше свободы для выражения индивидуальности вашего приложения.

Вот некоторые ключевые слова, которые вы можете использовать в CSS:

линейный
простой
выдвижной
легкость ввода-вывода

Источник: CSS Transitions, W3C

Вы также можете использовать ключевое слово шагов , которое позволяет создавать переходы с дискретными шагами, но перечисленные выше ключевые слова являются наиболее полезными для создания анимации, которая кажется естественной.

Линейные анимации

Анимации без какого-либо замедления обозначаются как linear . График линейного перехода выглядит так:

По мере того, как время идет, значение увеличивается в равной степени. При линейном движении вещи, как правило, кажутся роботизированными и неестественными, и это то, что пользователей раздражает. Вообще говоря, вам следует избегать линейного движения.

Программируете ли вы анимацию с помощью CSS или JavaScript, вы обнаружите, что всегда есть возможность линейного движения.

Посмотреть линейную анимацию

Чтобы добиться указанного выше эффекта с помощью CSS, код должен выглядеть примерно так:

  переход: линейное преобразование 500 мс;

Простая анимация

При замедлении анимация запускается быстрее, чем линейная, а в конце у нее также есть замедление.

Снижение скорости обычно лучше всего подходит для работы с пользовательским интерфейсом, потому что быстрый запуск дает вашей анимации ощущение отзывчивости, но при этом позволяет естественное замедление в конце.

Посмотреть анимационный ролик

Есть много способов добиться эффекта ослабления, но самый простой — это ключевое слово easy-out в CSS:

  переход: преобразование, замедление 500 мс;

Простая анимация

Анимация замедления начинается медленно и быстро заканчивается, что противоположно анимации замедления.

Этот вид анимации похож на падение тяжелого камня, когда он начинает медленно и быстро падает на землю с глухим ударом.

С точки зрения взаимодействия, однако, простота может показаться немного необычной из-за их внезапного завершения; вещи, которые движутся в реальном мире, скорее замедляются, чем просто внезапно останавливаются. Упрощение также имеет пагубный эффект в виде вялости при запуске, что негативно влияет на восприятие отзывчивости вашего сайта или приложения.

Посмотреть анимацию упрощения

Чтобы использовать легкую анимацию, как и линейную анимацию, вы можете использовать ключевое слово:

  переход: преобразование Легкость входа 500 мс;

Легкость вывода анимации

Тормозное движение вперед и назад похоже на ускорение и замедление автомобиля, и при разумном использовании оно может дать более впечатляющий эффект, чем просто замедление.

Не используйте слишком большую продолжительность анимации из-за медленного начала анимации. Обычно подходит что-то в диапазоне 300-500 мс, но точное число во многом зависит от ощущения от вашего проекта. Тем не менее, из-за медленного начала, быстрой середины и медленного конца анимация имеет повышенный контраст, что может быть вполне удовлетворительным для пользователей.

См. Анимационную выкладку

Чтобы получить анимацию легкости вывода, вы можете использовать ключевое слово CSS easy-in-out :

  переход: преобразование 500 мс легкость входа-выхода;

Обратная связь

Была ли эта страница полезной?

Есть

Что было самым лучшим на этой странице?

Это помогло мне выполнить мои цели

Спасибо за ваш отзыв!Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста, создать проблему.