Пример

div {
 ширина: 100 пикселей;
 высота: 100 пикселей;
фон: красный;
  положение: относительное;
имя-анимации: пример;
продолжительность анимации: 3 с;
анимация-задержка: 2 с;
  animation-fill-mode: назад;
}

В следующем примере элемент

  кубический Безье (x1, y1, x2, y2)
  

  шагов (количество шагов, направление)
  

  <дел>
  <дел>

<ул>

Начать анимацию

Выберите функцию смягчения: <выбрать> линейный легкость облегчение легкий вход упрощение кубический-безье(0.1, -0,6, 0,2, 0) кубический-безье (0, 1. 1, 0.8, 4) шаги(5, конец) шаги(3, начало) шаги(4)

УСБ

  тело > раздел {
  положение: родственник;
  высота: 100 пикселей;
}

дел > дел {
  положение: абсолютное;
  ширина: 50 пикселей;
  высота: 50 пикселей;
  цвет фона: синий;
  фоновое изображение: радиальный градиент (круг 10 пикселей 10 пикселей, rgba (25 255 255,0.8),rgba(25 255 255,0,4));
  радиус границы: 50%;
  верх: 25 пикселей;
  анимация: 1,5 с бесконечным чередованием;
}

@keyframes двигаться вправо {
  от {
    слева: 10%;
  }

  к {
    слева: 90%;
  }
}

ли {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
  нижняя граница: 20px;
}
  

JavaScript

  const selectElem = document.querySelector('select');
const startBtn = document.querySelector('button');
const divElem = document.querySelector('div > div');

стартБтн. addEventListener('щелчок', () => {
  if(startBtn.textContent === 'Начать анимацию') {
    divElem.style.animationName = 'движение вправо';
    startBtn.textContent = 'Остановить анимацию';
    divElem.style.animationTimingFunction = selectElem.value;
  } еще {
    divElem.style.animationName = 'не установлено';
    startBtn.textContent = 'Начать анимацию';
  }
});

selectElem.addEventListener('change', () => {
  divElem.style.animationTimingFunction = selectElem.value;
});
  

Результат

Эти кубические кривые Безье допустимы для использования в CSS:

 
кубический-безье (0.1, 0,7, 1,0, 0,1)


кубический Безье (0, 0, 1, 1)


кубический Безье (0,1, -0,6, 0,2, 0)


кубический Безье (0, 1.1, 0.8, 4)
  

Эти определения кубических кривых Безье недействительны:

 
кубический Безье (0,1, красный, 1,0, зеленый)


кубический Безье (2,45, 0,6, 4, 0,1)


кубический Безье (0,3, 2,1)


кубический Безье (-1,9, 0,3, -0,2, 2,1)
  

CSS-переходы | CSS-переходы, CSS-преобразования и CSS-анимация

Поддержка браузером переходов CSS

Как использовать переходы

Если вы раньше не использовали переходы, вот краткое введение.

Добавьте к элементу, который хотите анимировать, следующий код CSS:

#id_of_element {
  -webkit-transition: все 1s easy-in-out;
  -moz-transition: все 1 с плавным входом-выходом;
  -o-переход: все 1 с плавным входом-выходом;
  переход: все 1 с облегчением входа-выхода;
}
 

Существует много дублирования из-за префиксов поставщиков — до тех пор, пока спецификация не будет завершена, это будет сохраняться. Если вас это беспокоит, существуют различные инструменты, такие как CSS Scaffold, LESS или, как я предпочитаю, SASS, которые позволяют вам определять примеси, чтобы избежать повторяющегося кода.

Другой подход состоит в том, чтобы просто написать CSS без префиксов, а затем использовать -prefix-free Леа Веру, чтобы добавить их во время выполнения.

Чего точно не следует делать, так это включать только префикс webkit. Как ни заманчиво, особенно при разработке для мобильных устройств, webkit — не единственный движок рендеринга!

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

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

Всякий раз, когда какое-либо свойство изменяется, оно будет анимироваться, а не изменяться напрямую. Это может быть связано с другим набором свойств, установленных для псевдокласса, например, при наведении курсора, или с новым классом или свойствами, установленными javascript.В приведенном ниже примере используется :hover для изменения свойств — JavaScript не требуется.

Чтобы увидеть разницу в скорости, посмотрите тест скорости.

Различные функции синхронизации

В дополнение к встроенным функциям синхронизации вы также можете указать свои собственные. Отличный инструмент Ceaser CSS Easing Tool делает это очень легко.

Стоит отметить, что создаваемые вами кривые могут иметь отрицательные значения. Кривая Безье для последней ячейки выше равна кубических безье (1.000, -0,530, 0,405, 1,425) , отрицательные значения заставляют его «разбегаться», что выглядит довольно круто!

Задержки

Синтаксис перехода CSS3 имеет вид:

переход: [ <свойство-перехода> ||
               <длительность-перехода> ||
               <функция времени перехода> ||
               <задержка перехода> ]
 

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

Задержки перехода

Это работает, просто добавляя задержку к каждому из разных кругов. Это так же просто, как добавить задержку перехода : 0,6 с; к элементу.

Дополнительные задержки

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

#dd_main2 {
  переход: все 1 с облегчением входа-выхода;
}
 

Вместо круга «Пример 1» (зеленый) используется следующий CSS:

#dd_main2 {
  свойство перехода: сверху, слева;
  длительность перехода: 1с, 1с;
  задержка перехода: 0 с, 1 с;
}
 

В то время как кружок «Пример 2» (красный) имеет вместо этого CSS:

#dd_main2 {
  свойство перехода: сверху, слева, радиус границы, цвет фона;
  длительность перехода: 2 с, 1 с, 0.5 с, 0,5 с;
  задержка перехода: 0 с, 0,5 с, 1 с, 1,5 с;
}
 

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

Анимируемые свойства

Что касается свойств, которые вы можете анимировать, лучше всего поэкспериментировать. W3C поддерживает список свойств, которые можно анимировать в спецификации CSS Transitions. К ним относятся все, от цвета фона и интервала между буквами до тени текста и минимальной высоты.Многие из этих свойств по умолчанию не поддерживаются анимацией jQuery, что делает переходы CSS гораздо более полезными. Кроме того, многие браузеры аппаратно ускоряют анимацию, не требующую перерисовки, а именно непрозрачность, 3D-преобразования и фильтры. Чтобы увидеть, какие методы ускоряет Webkit, взгляните на код AnimationBase.cpp из исходного кода Webkit. На момент написания здесь определены три класса: PropertyWrapperAcceleratedOpacity , PropertyWrapperAcceleratedTransform и PropertyWrapperAcceleratedFilter .Это анимации, которые Webkit ускоряет. Другие браузеры делают вещи по-другому, но поскольку Webkit популярен на мобильных устройствах, где эти вещи имеют наибольшее значение, стоит отметить этот особый случай.

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

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

Чтобы узнать больше о переходах CSS3, прочитайте спецификацию W3C.

CSS-переход [Функция синхронизации и задержка]

Это вторая часть полного руководства по CSS-переходам. В этом посте вы познакомитесь с продвинутыми навыками джедая CSS transition-timing-function и transition-delay !

Если вы пропустили часть 1, щелкните здесь, чтобы узнать о продолжительности и свойстве перехода CSS.

Функция времени перехода CSS

Вот где все становится по-настоящему круто.

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

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

Это то, что CSS функция времени перехода может сделать для вас. Существует пять часто используемых предустановленных параметров:

• линейный: переход происходит с постоянной скоростью.
• легкость: начинается быстро, но замедляется непосредственно перед концом. Это значение по умолчанию.
• easy-in: Начните медленно и постепенно наращивайте скорость.
• easy-out: начинается быстро, но рано замедляется.
• easy-in-out: начинается медленно, замедляется рано, но быстро в средней части.

Это легче понять визуально — наведите указатель мыши на изображение ниже, чтобы вызвать перемещение блоков:

См. перо на КодПене.

Как видите, все они достигают финиша одновременно, но движутся по пути с разной скоростью.

Чтобы сделать это, я абсолютно позиционировал каждую коробку, присвоил каждому уникальный класс, а затем использовал этот класс для установки перехода по свойству left :

  . linear { 
 переход: левый 2s linear; 
 } 
 .ease { 
 переход: левое 2s легкость; 
 } 
 
 .ease-in { 
 переход: левый 2s easy-in; 
 } 
 
 .облегчение { 
 переход: левое 2 с ослабление; 
 } 
 
 .ease-in-out { 
 переход: левое 2-секундное ускорение; 
 } 
  

Как мы обсуждали в части 1, Продолжительность и свойства перехода CSS, вы можете назначить эти три значения по отдельности, например, вы можете использовать это:

  .ease-in-out { 
 свойство перехода: слева; 
 продолжительность перехода: 2 с; 
 функция синхронизации перехода: облегчение входа-выхода; 
 }  

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

Настройка пользовательских функций синхронизации с помощью

В большинстве случаев эти пять значений CSS transition-timing-function по умолчанию, вероятно, помогут вам.

Однако при необходимости вы можете настроить ускорение и замедление вашего перехода с помощью функции Cubase-Bezier() .

Кубическая кривая Безье — это тип кривой, названный в честь французского инженера Пьера Безье, который использовал ее для создания кривых на автомобилях Renault в 1960-х годах.Функция принимает четыре аргумента и на их основе вычисляет кривую, определяющую время перехода.

Хорошо, это полный рот!

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

Время, затрачиваемое на переход, отсчитывается по оси x, а ход перехода (например, насколько далеко перемещается прямоугольник) — вверх по оси y. Мы видим прямую линию с линейной , потому что переход происходит с постоянной скоростью.

Теперь давайте посмотрим на другой, easy :

Как вы можете видеть здесь, большая часть прогресса перехода easy происходит довольно рано. В середине продолжительности 80% анимации уже завершено. Последние 20% анимации занимают столько же времени, что и дает эффект замедления.

Каждое из пяти «предустановленных» значений времени перехода имеет свою собственную кривую, и вы можете воссоздать их с помощью cube-bezier() , если вы действительно хотите:

• линейный = кубический-безье (0.0, 0,0, 1,0, 1,0)
• легкость = кубический-безье (0,25, 0,1, 0,25, 1,0)
• легкость = кубический безье (0,42, 0, 1,0, 1,0)
• облегчение = кубический-безье (0, 0, 0,58, 1,0)
• легкость входа-выхода = кубический-безье (0,42, 0, 0,58, 1,0)

И, конечно же, вы можете создать свою собственную кривую! У Lea Verou есть отличный кубический инструмент Безье, с которым вы можете поиграть.

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

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

Если мы повторим это в наших переходах, они будут казаться более естественными.

CSS-переходы с

Каждый из вышеперечисленных параметров обеспечивает плавный переход от одного состояния к другому. Но что, если вам не нужен плавный переход? Что делать, если вы хотите изменить состояние в несколько отдельных этапов? Что ж, CSS transition-timing-function имеет функцию steps() , которая может сделать именно это:

  функция синхронизации перехода: шаги (10);  

Опять же, вы можете объединить это в свойство перехода :

  переход: влево 2s шагов(10);  

Здесь мы переходим свойство left , устанавливая длительность перехода в 2 секунды, и мы хотим, чтобы это происходило за 10 дискретных этапов, а не за одно плавное движение.

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

См. перо на КодПене.

Обратите внимание, что все значения CSS transition-timing-function технически используют шаги. Просто когда мы используем , облегчаем или один из других вариантов, браузер использует так много шагов, что человеческому глазу он кажется гладким. Если вы используете действительно большое значение с шагами, например steps(240) , оно должно быть неотличимо от версии linear .

шага CSS — нужен быстрый старт?

Вы можете подумать, что если переход занимает пять шагов, включает ли начальную точку ? Например, если мы используем steps(5) , включена ли начальная позиция элемента в эти 5 шагов? Или он делает 5 шагов из до этой точки?

Если уж на то пошло, включено ли конечное состояние? Или это означает, что между начальным и конечным состояниями есть 5 промежуточных шагов?

Это то, что вы можете выбрать сами, передав второй аргумент, jumpterm, в steps() — вместе с количеством шагов. Здесь у вас есть несколько вариантов (каждый из этих примеров предполагает, что вам нужно 5 шагов):

• jump-start : Элемент сделает пять шагов из начального состояния в конечное. Таким образом, всего будет 6 этапов. Как только начнется переход, элемент сразу перепрыгнет на первый шаг — старт!
• Jump-End : Элемент будет делать те же самые шаги, что и Jump-start , но он достигнет финальной стадии точно после завершения перехода.Это немного похоже на легкость в — будет ощущаться медленный старт. Это значение по умолчанию.
• jump-none : Начальное состояние и конечное состояние включены в 5 шагов. Таким образом, между ними будет 3 промежуточных шага, и всего технически элемент сделает 4 изменения.
• jump-both : Начальное состояние и конечное состояние , а не включены в 5 шагов. Таким образом, между ними будет 5 промежуточных шагов, а всего элемент технически сделает 6 изменений.

(обратите внимание, что вы также можете использовать start вместо jump-start и end вместо jump-end ).

Посмотрим, как они выглядят! Используя те же блоки, что и выше, я добавил разные классы к каждому блоку и применил к каждому из них разные условия перехода, каждый раз запрашивая 5 шагов:

  .no-jump-setting { 
 переход: влево 2 с шагов (5); 
 } 
 .jump-start { 
 переход: осталось 2 с шагов (5, рывок); 
 } 
 
 .конец перехода { 
 переход: осталось 2 с шагов (5, конец перехода); 
 } 
 
 .jump-none { 
 переход: влево 2s шагов(5, jump-none); 
 } 
 
 .jump-both { 
 переход: влево 2s шагов(5, прыжок-оба); 
 } 
  

И вот результат:

См. перо на КодПене.

Дело не только в движении!

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

Но помните, что эти настройки времени перехода применяются ко всем переходам. Вот как они влияют на переходы смены цвета, например:

См. перо на КодПене.

Задержка перехода CSS

Окончательное свойство перехода — CSS transition-delay . Как следует из названия, это позволяет вам установить задержку между запуском перехода и фактическим началом анимации.

Вы используете это так:

  задержка перехода: 1 с;  

Чтобы совместить его со всеми остальными в переходе , нужно просто добавить задержку в конец:

  переход: влево 2 с отпустить 1 с;  

Наведите курсор на поля, чтобы увидеть несколько разных задержек:

См. перо на КодПене.

Обратите внимание, что время задержки составляет , а не , включенное в transition-duration . Таким образом, переход с продолжительностью 2 с и задержкой в ​​1 с займет в общей сложности 3 с.

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

Специальные возможности с переходами и анимацией

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

Но вы, наверное, заметили, что анимация сейчас повсюду в Интернете. Так что же делают эти люди? Они просто не пользуются интернетом?

Нет, но они меняют настройку в своей ОС, чтобы указать, что они предпочитают меньше движений. Браузеры обнаруживают этот параметр и передают его на ваш сайт. Затем вы можете определить, каковы их предпочтения, и использовать медиа-запрос Preferences-Reduced-Motion , чтобы отключить ваши переходы:

  @media (предпочитает уменьшенное движение: уменьшить) { 
 .поле { 
 переход: нет; 
 } 
 }  

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

  @media (предпочитает уменьшенное движение: без предпочтений) { 
 .box { 
 переход: фон 2 с облегчение входа-выхода 1 с; 
 } 
 }  

Значение no-preference является значением по умолчанию для Preferences-Reduced-Motion .Поэтому, если вы поместите все свои переходы в этот запрос, ваш сайт включит переходы, если не будет сказано не делать этого. Это более безопасный вариант, на тот случай, если вы или ваши коллеги забудете отключить переход в запросе reduce .

Что ты создашь?

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

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

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

Об авторе:

Уоррен Дэвис — фронтенд-разработчик из Великобритании.
Больше информации от него можно найти на https://warrendavies.net

Эксперименты с CSS-переходами

Если вы не слышали, добавить анимацию с помощью CSS довольно просто. В наши дни вам не нужны jQuery или Javascript, чтобы это произошло.

  /*
.див {
  переход:    
}
*/

/* Пример */

.дел {
  переход: легкость ширины 100 мс 500 мс;
}
  

В приведенном выше примере:

• 500 мс количество времени, которое потребуется для завершения перехода (500 мс == 0,5 с)
• ширина это свойство, к которому мы хотим перейти
• легкость — функция синхронизации, по умолчанию — легкость, которая начинается медленно, затем быстро, а затем медленно заканчивается
• 100 мс — это время задержки перед запуском (100 мс == 0. 1с)

В DC/OS у нас есть процесс создания новой службы. В этом потоке вы можете переключиться в «Режим JSON», после чего появится текстовый редактор. В целях экспериментов в команде с различными скоростями и методами я собрал этот Codepen.

См. Эксперимент Pen CSS Transitions Experiment Ли Манро (@leemunroe) на CodePen.

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

• облегчение входа-выхода 400 мс
• кубический безье(.17,.67,.83,.67) 1000 мс
• кубический безье (.05,.34,.96,.67) 400 мс
• Дополнительные примеры см. на сайте cube-bezier.com

Еще несколько советов по CSS-переходам

При изменении некоторых свойств, таких как left и margin, браузер пересчитывает стили в каждом кадре. Это довольно дорого и может привести к ненужной перерисовке, особенно если на экране много элементов. Подробнее о подводных камнях от Алекса Маккоу.

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

От 200 мс до 500 мс секунд — хороший диапазон для анимации интерфейса. 100 мс воспринимаются как мгновенные. 1 секунда это предел. Подробнее о скорости анимации от Val Head.

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

Пол — защитник дизайна и производительности

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

TL;DR

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

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

Ослабление ключевых слов

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

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

• линейный
• вставной
• выдвижной

Источник: Переходы CSS, W3C

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

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

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

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

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

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

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

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

Анимация замедления

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

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

Посмотреть анимацию замедления

Существует множество способов добиться эффекта ослабления, но самым простым является ключевое слово easy-out в CSS:

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

Упрощенная анимация

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

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

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

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

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

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

Анимация с плавным переходом

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

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

Посмотреть анимацию облегчения входа

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

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

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

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

Да

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

Это помогло мне достичь цели(ей)

Там была нужная мне информация

У него была точная информация

Читать было легко

Что-то еще

№

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

Это не помогло мне достичь цели(ей)

Отсутствовала нужная мне информация

У него была неточная информация

Трудно было читать

Что-то еще