Ease in ease out что это
Использование CSS переходов
Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS-свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.
Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.
CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).
Какие CSS-свойства анимируются?
Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень доступных для анимирования свойств ограничен определённым набором.
Пример анимирования нескольких свойств
CSS-свойства, определяющие переходы
Можно контролировать определённые параметры перехода следующими подсвойствами:
transition-property (en-US) Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом. transition-duration Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности.
Плавная трансформация | CSS свойство transition
Псевдокласс :hover позволяет элементам быть менее статичными, изменяя их свойства при наведении мышки.
Благодаря свойству transition (w3.org) можно сделать плавный переход между состояниями элемента.
Популярные сочетания transition с другими свойствами, например, opacity или transform
100 комментариев:
На самом деле мне приятно, что получается у читателей находить творческую нотку. Обращайся, помогу, чем смогу.
И, конечно, интересно взглянуть на ссылку 😉 Космо Мизраил Горыныч я на своём блоге попробую «проапгрейдить» снеговиков, так как мне тоже нужен этот эффект для моей галереи >_ NMitra Да, с фантазией у меня тоже туго, благо читатели всё время удивляют.
Очень немного и поверхностно. Ээээ. Из скрипта могу удалить ненужные фрагменты, тем самым настроив его под себя. С событием onclick недавно познакомилась.
Всё начинается с просьбы в комментарии и я лезу в дебри. А когда туда часто ходишь, дебри не кажутся такими уж ужасными.
В Firefox нормально, в Хроме кнопка «последние» (в CSS #footer-dva) «плывёт». Добавляю position: absolute, ситуация меняется, теперь в Firefox наблюдается кривобразие. В IE гаджеты друг под другом.
Пока идеи отсутствуют. Космо Мизраил Горыныч ну я тоже в ява-скрипте ни бум-бум)))))
посмотрел ваш код.
короче, я в коде окончательно запутался %.% и сотворил свою панель. конструкция гораздо проще, эффект тот же самый 🙂
Или сделала что-то вроде
Нужно, чтобы оба значения были указаны или в процентах или в величинах, например px. Есть ещё calc. Анонимный Спасибо большое за ответ!
В процентах таже картина, разворачивается, но без задержки.
А не подскажите может какойнить другой способ?
Нужно, чтоб при длинном тексте, часть теста скрывалась (видимая часть должна быть одинаковой), а при наведении курсора раскрывалась, но только на размер элемента (текста)
Спасибо. NMitra Смотрите в сторону позиционирования. Вам нужно показать поверх всего содержания текст или чтобы развёрнутый текст сдвигал остальной контент? Анонимный Пока сдвигает контент, но я не против, смотрится нормально, хочется пока чтоб показывало (разворачивало) только по размеру текста NMitra Ваш вопрос поняла, подумаю до конца недели, может завтра что и напридумаю. Анонимный Буду премного благодарен.
Спасибо за отзывчивость. NMitra Посмотрела, подумала. Разворачиваться плавно не будет. Можно другой какой-нибудь эффект или задать фиксированное значение или JavaScript
http://shopping.mk.ua/catalog/grupa/69 NMitra Нормально, как добились?
Adilet Melisov Спасибо классная статья! Спасибо за труд и ваше время! если еще будут статьи готов с радостью прочитать и научиться ))) NMitra Добро пожаловать! seoronin Наталья, отличная подборка примеров! Только у тебя нашел, как высоту div’а сделать плавной 🙂 NMitra Высота блока не должна быть указана в процентах. Пример:
Частично решает проблему max-height. Анонимный Сайт просто шикарный! Все что нужно, мне полезное, нашел здесь! NMitra Благодарю за отзыв! Богдан Казан Полезная статья для новичков) Анонимный Спасибо Вам большое. На Вашем сайте, всегда столько интересного и с примерами интересными и всё подробно рассказано. Действительно, БОЛЬШОЕ ВАМ спасибо. NMitra Благодарю! Очень радостно для меня было читать ваши слова! Анонимный Здравствуйте!
У меня вопросик.
Вот игрался, экспериментировал. И получилось. Что эффект. Смещение вниз. Вниз и наверх. Всё прекрасно. А вот в право и лево не едет, а перескакивает. Не подскажите почему. И можно ли сделать по диагонали. Например, из угла вытащить на середину.
А сайт Ваш просто замечательная находка для меня. Столько интересного и всё в одном месте. Спасибо Вам большое!
NMitra Здравствуйте, нужно начальное положение (top: 0; left:0;) и конечное (top: 50px; left: 50px;) http://jsfiddle.net/NMitra/d5jcmhxe/ Анонимный Извините за беспокойство. Всё нарыл, всё додумал. Добавил к top: 0; right:0; или left:0; И hovere right:сколько хочу; или left: сколько хочу;
И всё поехало. Только да в ИЕ не хочет, будем думать.
Спасибо Вам за такой хороший сайт. С его помощью становлюсь умнее. Спасибо.
Анонимный Во, пока я строчил и Вы ответили. Спасибо Вам большое. Анонимный Бомбочка, пацаны! Анонимный Здравствуйте!
Скажите пожалуйста как в примере с увеличением ДИВа как у Вас здесь в 2 раза.
Как сделать что бы увеличивался толь в одну сторону. Например в право.
Или чтобы. С верху в низ то есть по высоте.
Спасибо за вашу статью, очень интересна.
#uptocall <
border-radius: 50%;
width:110px;
height:110px;
animation: uptocall 1.5s linear infinite;>
#uptocall <
border-radius: 50%;
width:110px;
height:110px;
animation: uptocall 1.5s linear infinite;>
CSS-анимация с помощью свойства transition
Свойство transition можно перевести, как переход, т.е. при анимации с помощью этого css-свойства в течение некоторого времени осуществляется плавный переход от начального к конечному значению выбранных для этого свойств.
hover-эффекты с помощью свойства transition
Чаще всего свойство transition применяется для создания hover-эффектов, или эффектов при наведении курсора мыши. Его суть заключается в том, что оно просчитывает изменения между свойствами, заданными для обычного состояния элемента, и при наведении на него курсора мыши, которое задается с помощью псевдокласса :hover. Это позволяет создавать различные красивости от плавного изменения цвета текста и фона на кнопках-ссылках до наплывающих блоков и сменяющихся картинок. Очень интересные эффекты можно получить, если использовать псевдоэлементы ::before и/или ::after.
Составляющие свойства transition
Свойство transition является составным (обобщенным, или универсальным), что значит, что оно состоит из ряда свойств, которые можно задавать по отдельности. Синтаксис его таков:
Из кода видно, что вы можете использовать 4 свойства. Рассмотрим эти css-свойства по отдельности:
Свойство transition-property
Возможные значения transition-property :
Ниже показан код, который меняет цвет фона у div с id=»tr-property» с салатного на желтый за 0.8 секунды.
Наведите на блок ниже
В свойстве transition-property можно указать несколько значений через запятую или использовать значение all (все свойства), которое является значением по умолчанию. Также свойство transition-property имеет значение none (ни одно из свойств), которое обычно применяют для отмены анимации, например на мобильных устройствах.
Рассмотрим пример, в котором нужно анимировать несколько свойств:
Наведите на блок ниже
Тот же самый пример можно было сократить, использовав в коде свойство all вместо перечисления нескольких свойств для анимации.
Наведите на блок ниже
Свойство transition-duration
Код примера для исследования свойства transition-duration таков:
Пример с разной длительностью анимации:
Наведите на блок ниже
Свойство transition-duration
Использование только свойства transition-duration при hover-эффекте:
Используем transition-duration
Свойство transition-timing-function
Варианты свойства transition-timing-function :
Суть использования графика заключается в том, что у нас по вертикальной оси отображен прогресс, т.е. разница в числовых значениях того свойства, которое изменяется в процессе анимации. По горизонтальной оси у нас показано время, в течение которого происходит переход.
В редакторе кода Brackets вы также можете воспользоваться перетягиванием одного или обоих маркеров курсором мыши или смещать его после выделения клавишами-стрелками. При изменении значения вы так же, как и в случае с Инспектором свойств, получаете функцию вида cubic-bezier :
Подробнее об основах изменения скорости можно почитать в этой статье.
В том случае, когда для элемента задается больше одного перехода, например, при наведении мы изменяем не только цвет текста элемента, но и цвет его границы и размер закругления границ, можно использовать разные функции для каждого свойства. В коде нужно указывать значения свойств и функций через запятую.
Свойство transition-timing-function
Example 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aliquam molestiae vitae possimus, nesciunt aliquid quaerat sint illum? Vel libero ducimus quidem nesciunt.
Example 2
Aspernatur assumenda culpa totam eligendi asperiores, nesciunt enim dignissimos ab perspiciatis, nisi saepe. Error et veniam natus magnam delectus nostrum corporis maiores!
Example 3
Architecto asperiores modi cum aliquid labore, quasi impedit quis velit similique adipisci sunt molestiae soluta at nam eligendi ad dignissimos temporibus.
Полное руководство по правильному использованию анимации в UX
В настоящее время сложно кого-то поразить и удивить анимацией интерфейса. Она демонстрирует взаимодействие между экранами, объясняет, как использовать приложение или просто обращает внимание пользователя на определенный объект. Исследуя статьи об анимации, я обнаружил, что почти все они описывают только конкретные случаи использования или общие факты об анимации, но я не встречал ни одной статьи, где бы все правила, касающиеся анимации интерфейсов, были бы понятны и описаны детально. Что ж, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила воедино, чтобы другим дизайнерам, не приходилось искать дополнительную информацию.
Продолжительность и скорость анимации
Когда элементы меняют свое состояние или положение, анимация должна быть достаточно медленной, чтобы дать пользователям возможность заметить эти изменения, но в то же время достаточно быстрой, чтобы не заставлять долго ждать.
Не делайте анимацию слишком быстрой, пользователю нужно немного времени на распознание изменений, но и не позволяйте ему зевать.
Многочисленные исследования показали, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Эти цифры основаны на конкретных особенностях человеческого мозга. Любая анимация короче 100 мс является мгновенной и не распознается мозгом вообще. Обратите внимание, что анимация продолжительностью более 1 секунды передаст ощущение задержки и, таким образом, будет скучной для пользователя.
Длительность анимации, которую желательно использовать при ее создании в интерфейсе.
Material Design Guidelines также предлагают ограничить продолжительность анимации на мобильных устройствах до 200 – 300 мс. Что касается планшетов, продолжительность должна быть больше на 30% – около 400 – 450 мс. Причина проста: размер экрана больше, поэтому, при изменении положения объекты преодолевают более длинный путь. На wearable-устройствах продолжительность должна быть соответственно на 30% короче – около 150 – 200 мс, потому что на меньшем экране расстояние для перемещения короче.
Размер мобильных устройств влияет на продолжительность анимации
Веб-анимация трактуется немного иначе. Так как мы привыкли к почти мгновенному открытию веб-страниц в браузере, мы ожидаем также быстрого перехода между различными состояниями. Таким образом, продолжительность веб-переходов должна быть примерно в 2 раза короче, чем на мобильных устройствах – от 150 до 200 мс. В противном случае пользователь будет думать, что компьютер зависает или появились какие то проблемы с подключением к Интернету.
Но, забудьте об этих правилах, если вы создаете декоративную анимацию на своем сайте или пытаетесь привлечь внимание пользователя к определенным элементам. В этих случаях продолжительность анимации может быть дольше.
Большой экран компьютера = Медленная анимация? Ни в коем случае!
Необходимо помнить, что независимо от платформы продолжительность анимации должна зависеть не только от пройденного расстояния, но и от размера объекта. Меньшие элементы или анимация с небольшими изменениями должны двигаться быстрее. Соответственно, анимация с большими и сложными элементами выглядит лучше, когда она длится немного дольше.
Среди движущихся объектов одинакового размера первыми останавливаются объекты, прошедшие кратчайшее расстояние.
Маленькие объекты по сравнению с большими движутся медленнее, поскольку они выполняют большие перемещения.
Продолжительность анимации зависит от размера объекта и пройденного расстояния.
Когда объекты сталкиваются, энергия столкновения должна быть равномерно распределена между ними согласно физическим законам. Поэтому, лучше исключить bounce эффект. Используйте его только в редких случаях, когда это имеет смысл.
Движение объектов должно быть четким и резким, поэтому не используйте размытие в движении (да, пользователи After Effects, не в этот раз). Трудно воспроизвести этот эффект даже на современных мобильных устройствах, и он вообще не используется в анимации интерфейса.
Не используйте эффект размытия в вашей анимации
Элементы списка (новостные карточки, списки адресов электронной почты и т. д.) должны иметь очень короткую задержку между их появлением. Каждое появление нового элемента должно длиться от 20 до 25 мс. Более медленное появление элементов может раздражать пользователя.
Анимация для элементов списка должна длиться 20–25 мс.
Смягчение
Смягчение помогает сделать движение объекта более естественным. Это один из самых основных принципов анимации, который подробно описан в статье «Анимация Диснея».
Чтобы анимация не выглядела механической и искусственной, объект должен двигаться с некоторым ускорением или замедлением – как и все объекты в реальном мире.
Анимация с замедлением выглядит более естественной, по сравнению с линейной
Линейное движение
Объекты, на которые не воздействует какая-либо физическая сила, движутся линейно, другими словами, с постоянной скоростью. И именно из-за этого они выглядят очень неестественно, искусственно для человеческого глаза.
Все приложения для анимации используют анимационные кривые. Я постараюсь объяснить, как их читать и что они значат. Кривая показывает, как положение объекта (ось Y) изменяется в течение тех же временных интервалов (ось X). В данном случае движение является линейным, поэтому объект проходит одно и то же расстояние за одно и то же время.
Кривая линейного движения
К примеру, линейное движение можно использовать только когда объект меняет свой цвет или прозрачность. Короче говоря, мы можем использовать его для состояний, когда объект не меняет свою позицию.
Кривая замедления или ускорения
На кривой видно, что в начале положение объекта медленно изменяется, а скорость постепенно увеличивается. Это означает, что объект движется с определенным ускорением.
Кривая ускорения
Кривая ускорения должна использоваться, когда объекты вылетают на экране на полной скорости. Это могут быть системные уведомления или просто карточки интерфейса. Но имейте в виду, что такой тип кривой следует использовать только тогда, когда объекты позднее исчезают с экрана вовсе, и мы не можем их вернуть.
Кривая ускорения выброса карты за пределы экрана
Кривая анимации помогает передать правильное настроение. В приведенном ниже примере мы видим, что продолжительность перемещения и расстояние для всех объектов одинаковы, но даже небольшие изменения кривой дают вам возможность повлиять на настроение анимации.
И, конечно же, изменяя кривые, вы можете перемещать объект, придавая ему больше реалистичности.
Та же продолжительность и расстояние, но разные настроения
Кривая ease-out или кривая замедления
Ее свойства противоположны функциям кривой easy-in, поэтому объект быстро преодолевает большие расстояния, а затем медленно снижает скорость до полной остановки.
Кривая замедления
Этот тип кривой следует использовать, когда элемент появляется на экране – он всплывает на экране на полной скорости и постепенно замедляется до полной остановки. Это также может быть применено к различным карточкам или объектам, которые вылетают на экран.
Кривая замедления
Ease-in-out или стандартная кривая
Эта кривая заставляет объекты вначале набирать скорость, а затем медленно снижать ее до нуля. Этот тип движения чаще всего используется в интерфейсной анимации. Всякий раз, когда вы сомневаетесь, какой тип движения использовать в анимации, используйте стандартную кривую.
Стандартная кривая
Согласно Material Design Guidelines, лучше использовать асимметричную кривую, чтобы движение выглядело более естественным и реалистичным. Конец кривой должен быть более выраженным, чем ее начало, чтобы продолжительность ускорения была меньше, чем продолжительность замедления. В этом случае пользователь будет уделять больше внимания окончательному перемещению элемента и, следовательно, его новому состоянию.
Обратите внимание на разницу между симметричной и асимметричной стандартной кривой
Ease-in-out используется, когда объекты перемещаются из одной части экрана в другую. В таком случае анимация избегает концентрации внимания и драматического эффекта.
Движение карточки на экране и соответствующая асимметричная кривая
Тот же тип движения должен использоваться, когда элемент исчезает с экрана, но пользователь может в любое время вернуть его на прежнее место.
Панель навигации исчезает с экрана по стандартной кривой
Из этих примеров исходит фундаментальное правило, которым пренебрегают многие начинающие – начальная анимация не равна конечной анимации. Как и в случае с навигационным блоком – он появляется по кривой замедления и исчезает по стандартной кривой. Кроме того, согласно Google Material Design, время появления объекта должно быть больше, чтобы привлечь больше внимания.
Появление и исчезновение бокового меню выполняется с замедлением, по стандартной кривой соответственно.
Функция cubic-bezier () используется для описания кривых. Она называется кубической, потому что основана на четырех точках. Первая точка с координатами 0; 0 (внизу слева), а последняя с координатами 1; 1 (вверху справа) уже определены на графике.
Исходя из этого нам нужно описать только две точки на графике, которые задаются четырьмя аргументами функции cubic-bezier (): первые две-координаты x и y первой точки, вторые две-координаты x и у второй точки.
Для упрощения работы с кривыми я предлагаю использовать сайты easings.net и cubic-bezier.com. Первый содержит список наиболее используемых кривых, параметры которых вы можете скопировать в инструмент создания прототипов. Второй источник дает вам возможность поэкспериментировать с различными параметрами кривой и сразу увидеть, как будут двигаться объекты.
Различные типы кривых и их параметры для функции cubic-bezier ()
Хореография в анимации интерфейсов
Как и в балетной хореографии, основная идея состоит в том, чтобы направлять внимание пользователя в одном плавном направлении во время перехода из одного состояния в другое.
Существует два типа хореографии – равное и подчиненное взаимодействие.
Равное взаимодействие
Равное взаимодействие означает, что внешний вид всех объектов подчиняется одному конкретному правилу.
В этом случае внешний вид всех карточек воспринимается как единый поток, который обращает внимание пользователя в одном направлении, а именно сверху вниз. Если мы не будем следовать порядку, внимание пользователя будет рассеяно. Появление всех элементов сразу, будет выглядеть плохо.
Внимание пользователя следует обращать в одном направлении
Что касается табличного представления, это немного сложнее. Здесь внимание пользователя должно быть направлено по диагонали, поэтому показ элементов по одному – плохая идея. Раскрытие каждого элемента по одному сделает анимацию чрезмерно долгой, а внимание пользователя будет зигзагообразным – это неправильно.
Диагональное появление таблицы
Подчиненное взаимодействие
Подчиненное взаимодействие означает, что у нас есть один центральный объект, который привлекает все внимание пользователя, а все остальные элементы подчиняются ему. Этот тип анимации дает ощущение порядка и привлекает больше внимания к основному содержанию.
В других случаях пользователю будет очень трудно понять, за каким объектом следует наблюдать, потому что его внимание было рассеяно. Поэтому, если у вас есть несколько элементов, которые вы хотите анимировать, вам нужно четко определить последовательность их движения и анимировать как можно меньше объектов одновременно.
Стоит анимировать только один центральный объект, а все остальные будут ему подчиняться.
Согласно Material Design, когда движущиеся объекты меняют свой размер непропорционально, они должны двигаться по дуге, а не по прямой линии. Это помогает сделать движение более естественным. Под «непропорционально» я подразумеваю, что изменение высоты и ширины объекта путем увеличения/уменьшения выполняется асимметрично, то есть с разной скоростью (например, квадратная карточка превращается в прямоугольник).
Движение объекта, который непропорционально меняет свой размер, должно следовать вдоль дуги
Движение по линии используется, когда объект пропорционально меняет свой размер. Поскольку осуществление такого движения намного проще, правилом диспропорционального движения дуги часто пренебрегают. Взглянув на реальные примеры приложений, вы увидите доминирование линейного движения.
Пропорциональное изменение размера выполняется по прямой
Движение по кривой может быть достигнуто двумя способами: первый называется Vertical out – объект начинает двигаться горизонтально и заканчивает вертикальным движением; второй – Horizontal out – объект начинает двигаться вертикально и заканчивает горизонтальным движением.
Траектория движения объекта по кривой должна совпадать с главной осью интерфейса прокрутки. Например, на следующем изображении мы можем прокрутить интерфейс вверх и вниз, и, соответственно, карточка разворачивается вертикально, сначала вправо, а затем вниз. Обратное движение выполняется противоположным образом – карточка сначала поднимается вертикально, а заканчивает движение по горизонтали.
Направление разворачивания/сворачивания карточки должно совпадать с осью интерфейса
Если пути движущихся объектов пересекаются, они не могут двигаться друг через друга. Они должны оставлять достаточно места для движения другого объекта, замедляя или ускоряя собственную скорость. Другой вариант – они просто отталкивают другие объекты. Почему так? Поскольку мы предполагаем, что все объекты в интерфейсе лежат в одной плоскости.
Во время движения объекты не должны проходить друг через друга, они должны оставлять пространство для перемещения другого объекта.
В следующем случае движущийся объект может подниматься над другими объектами. Но опять же никакого растворения или движения сквозь другие объекты. Почему? Потому что считается, что элементы интерфейса ведут себя в соответствии с законами физики, и никакие твердые объекты в реальном мире не способны такое делать.
Объекты могут подниматься над другими объектами, а затем двигаться
Делаем выводы
Итак, если мы суммируем все вышеупомянутые правила и принципы, то анимация в интерфейсе должна отражать движения из физического мира – трение, ускорение и т. д. Имитируя поведение объектов из реального мира, мы можем создать последовательность, которая позволит пользователям понять, чего ожидать от интерфейса.
Если анимация построена правильно, то она ненавязчива и не отвлекает внимание пользователей от их целей. Если это произойдет, вам нужно либо смягчить ее, либо вообще удалить. Это означает, что анимация не должна замедлять пользователя или препятствовать выполнению его задач.
Но не забывайте, что анимация – это больше искусство, чем наука, поэтому лучше экспериментировать и проверять свои решения на пользователях.