Как сделать замедление в css
Представленные в данной статье примеры переходов вы можете протестировать на странице «Примеры переходов».
Добавление в CSS псевдоклассов сделало жизнь легче для всех веб-разработчиков. Теперь они могут создавать интерактивные эффекты с помощью псевдоклассов :hover и :focus, не прибегая к использованию сценариев JavaScript. Например, чтобы создать меняющуюся кнопку (т.е. кнопку, реагирующую на наведение курсора мыши), достаточно просто предоставить набор новых свойств стиля для псевдокласса :hover. Эти свойства задействуются автоматически, когда пользователь наводит курсор на кнопку.
Какими бы не были псевдоклассы замечательными, они больше не являются передовой технологией. Проблема с ними состоит в их характере типа «все или ничего». Например, настройки стиля псевдокласса :hover активируются сразу же при наведении курсора на элемент, т.е. происходит резкий скачок из одного стиля в другой. А вот в приложениях Flash, Silverlight или в прикладных программах эффект обычно более утонченный. Здесь кнопка при наведении курсора может менять цвет, сдвигаться или подсвечиваться, но делается это с использованием тонкой анимации, занимающей долю секунды.
Некоторые веб-разработчики начинают использовать подобные эффекты в своих работах, но для этого обычно требуется прибегать к помощи системы анимации JavaScript от сторонних разработчиков. А теперь CSS3 предоставляет им более простой способ — новую возможность переходов, позволяющую осуществлять плавный переход от одного набора стилей к другому.
Простой цветовой переход
Чтобы понять принцип работы переходов, нужно рассмотреть реальный пример. Такой пример показан на рисунке ниже, где изменение цвета кнопки при наведении на нее курсора осуществляется с помощью возможностей перехода CSS3:
Если бы это была обычная меняющаяся кнопка, при наведении курсора ее цвет бы менялся с зеленого на желтый резким прыжком. Но при использовании эффекта перехода зеленый цвет переходит в желтый плавно, занимая около полсекунды. Таким же образом происходит и обратный переход при отодвигании курсора. В результате получаем более изящную кнопку.
Смену цвета без эффекта перехода можно реализовать следующим кодом:
А этот код создает кнопку, которая форматируется только что описанным стилем:
Чтобы получить плавное изменение цвета, т.е. переход, нам нужно в только что описанный стиль добавить свойство transition. (Обратите внимание, что это свойство вставляется в обычный стиль (в данном случае стиль slickButton), а не в псевдокласс :hover.)
Как минимум, свойство transition требует установки двух значений: свойства CSS, которое нужно анимировать, и времени, на протяжении которого нужно выполнить изменение стилей. В данном примере переход применяется к свойству background, а время перехода равно 0.5 секунды:
Так, в данном примере присутствует один мелкий недостаток, а именно, в активированной кнопке меняются два элемента оформления — цвет самой кнопки и цвет текста на ней. Но эффект перехода применяется только к цвету фона кнопки, в результате чего смена цвета текста происходит мгновенно, в то время как цвет фона кнопки меняется постепенно.
Эту проблему можно решить двумя способами. При первом подходе свойству transition присваивается список переходов, разделенных запятыми:
Но этот код можно сократить, если нам нужно установить переход для всех изменяющихся свойств и при одинаковом времени перехода для них всех. В таком случае вместо списка свойств для перехода мы просто используем ключевое слово all:
На момент написания этих строк переходы поддерживались браузерами начиная с Opera 10.5 и Firefox 4, а также всеми версиями Safari и Chrome, с которыми вам когда-либо приходилось работать. Браузер Internet Explorer поддерживает переходы начиная с версии 10. Отсутствие поддержки переходов — не такая и большая проблема, как может показаться, т.к. браузер все равно меняет стили. Только эта смена происходит почти мгновенно, а не с растянутым во времени переходом. А это уже хорошая новость, т.к. веб-сайт может использовать переходы и в то же самое время сохранять основные визуальные стили для старых браузеров.
Задержка и комбинирование эффектов перехода
В эффектах перехода можно использовать свойство transition-delay, которое задерживает начало перехода на указанное время:
Теперь анимация перехода при наведении указателя мыши будет задерживаться на две секунды. То же самое произойдет и при отведении указателя мыши. Значение свойства transition-delay можно указывать в самом свойстве transition, как необязательный параметр:
Этот код аналогичен предыдущему. Спецификация CSS3 позволяет комбинировать несколько эффектов перехода (с разной длительностью), как это было продемонстрировано с кнопкой. Вместо указания всех подробностей перехода в одном свойстве transition, можно использовать свойства transition-property (для указания анимируемого свойства) и transition-duration (для указания задержки):
Это правило гораздо сложнее рассмотренных ранее. Во-первых здесь мы анимируем сразу 4 свойства указанные в transition-property. Во-вторых одним из анимируемых свойств является трансформация масштаба, которая позволяет при наведении курсора мыши на кнопку плавно увеличить ее в размерах, создавая очень красивый эффект.
Использование функций замедления
Переход можно настроить более тонко. Для этого можно использовать свойство transition-timing-function, которое позволяет изменять скорость перехода в процессе его осуществления. Например, начало перехода может быть медленным с последующим ускорением, или наоборот, быстрый переход в начале и замедленный в конце. Для коротких переходов это свойство не играет большой роли. Но в длинных и более сложных анимациях оно может изменить общее восприятие эффекта.
Функции замедления не являются каким-то инновационным средством CSS3, они уже давно используются в WPF и Silverlight (Инерционность движения).
Свойство transition-timing-function использует функцию cubic-bezier() для задания функции замедления через кривую Безье. Кривая Безье определяется двумя точками: начальное смещение и конечное смещение. Чтобы понять это давайте рассмотрим пример определения простой кривой Безье:
Этой функции соответствует следующий график:
Как видите здесь две точки с координатами (0.42, 0) и (0.58, 1) задают вид кривой Безье. Если вы укажите данную функцию замедления в предыдущем примере, то все эффекты перехода будут сначала выполняться чуть медленее, потом скорость будет больше и в конце перехода скорость снова уменьшится (согласно графику).
Понимание логики построения кривых Безье позволяет создавать практически бесконечное разнообразие пользовательских функций смягчения для анимаций CSS3. Есть даже возможность задавать отрицательные значения или значения, превышающие 1, для создания чрезвычайно кривых смягчений, например:
Опробуйте этот эффект на примере кнопки, гарантирую, результат вам понравиться.
В свойстве transition-timing-function можно использовать несколько стандартных значений, которые определяют некоторые значения функции cubic-bezier:
| Значение | График | Функция cubic-bezier() | Описание |
|---|---|---|---|
| linear | 0, 0, 1, 1 | Немедленный старт и остановка, анимация происходит с постоянной скоростью | |
| easy |
| 0.25, 0.1, 0.25, 1 | Быстрый старт и быстрое ускорение, медленный переход с замедлением в конце |
| ease-in |
| 0.42, 0, 1, 1 | Медленный старт с нарастающим ускорением и резкой остановкой в конце |
| ease-out |
| 0.42, 0, 0.58, 1 | Медленный старт с небольшим ускорением, скорость перехода постоянная, в конце происходит замедление |
Шаги анимации
Кроме функций замедления, элемент можно анимировать используя шаги, т.е. ступенчато. (Примером может послужить секундная стрелка часов, которая сначала двигается, а затем осуществляется задержка на 1 секунду, потом снова двигается и снова задержка и т.д.) Шаги задаются с помощью функции steps(). Ниже показан пример:
Теперь анимация увеличения кнопки будет проходить рывками. Задержка между рывками в данном случае будет 667ms (2000/3). Второй параметр функции steps указывает, будет ли рывок выполняться сразу или после задержки:
Плавная трансформация | 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;>
2.20. CSS3-переходы
CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.
Создание плавных изменений свойств элементов
Поддержка браузерами
1. Название свойства transition-property
Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.
Создаваемые эффекты должны быть ненавязчивыми. Не все свойства требуют плавного изменения во времени, что связано с пользовательским опытом. Например, при наведении на ссылку мы хотим видеть мгновенную смену цвета ссылки или цвета и стиля подчёркивания. Поэтому переходы следует использовать для тех свойств, к которым действительно нужно привлечь внимание.
| transition-property | |
|---|---|
| Значения: | |
| none | Отсутствие свойства для перехода. |
| all | Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента. |
| свойство | Определяет список CSS-свойств, перечисленных через запятую, участвующих в переходе. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
2. Продолжительность перехода transition-duration
Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.
3. Функция перехода transition-timing-function
Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.
Для создания более реалистичных анимаций используйте функцию cubic Bézier:
4. Задержка перехода transition-delay
Необязательное свойство, позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой. Не наследуется.
| transition-delay | |
|---|---|
| Значения: | |
| время | Время задержки перехода указывается в секундах или миллисекундах. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
5. Краткая запись перехода
Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;
Если воспользоваться значениями по умолчанию, то запись
6. Плавный переход нескольких свойств
Для элемента можно задать несколько последовательных переходов, перечислив их через запятую. Каждый переход можно оформить своей временной функцией.
7. Примеры переходов для различных свойств
Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.
CSS 3 Timing Functions и с чем их едят
Хей народ, пристегните ремни и держитесь покрепче, ибо наступил действительно волнительный момент: вам предстоит разобраться в тонкостях чрезвычайно интересных временных функций CSS!
Окей, ваша кровь, конечно, вряд ли закипела от предмета данной статьи, но шутки в сторону: временные функции — своего рода скрытая жемчужина, когда дело касается CSS, и, вполне вероятно, вы удивитесь тому, сколько всего интересного с помощью них можно сделать.
Прежде всего, мы должны четко понимать, когда применяются временные функции в CSS. Так вот, данный функционал предназначен для работы с CSS анимацией: переходами (transitions) и покадровой анимацией (keyframes).
О временной функции в CSS
Данное свойство — одно из самых неочевидных в CSS анимации, в то время как большинство свойств из этой категории вполне самопонятны. Тем не менее, суть его в контроле и изменении скорости анимации: оно определяет точки ускорения и замедления за указанный период времени.
С помощью данного свойства можно достичь разного восприятия пользователем скорости анимации, в то время как её фактическая продолжительность остается неизменной. Так что если вы еще не решили убежать без оглядки, пойдемте дальше, ибо временные функции таят в себе гораздо больше всякого интересного, нежели следует из сухой спецификации.
Прежде чем пойти дальше, давайте познакомимся с синтаксисом и посмотрим, как он вписывается в весь процесс определения CSS анимации. Простоты ради, давайте используем CSS переход и пропишем все transition-свойства по отдельности:
Сокращенная запись перехода не имеет строгого порядка значений, но требует, чтобы значение transition-delay находилось после значения transition-duration (не обязательно непосредственно после). Кроме того, значение transition-duration является единственным необходимым для определения функции. А поскольку значения по умолчанию у остальных параметров вполне приемлемы, для определения перехода вам редко понадобится нечто большее, чем:
Но это же скучно. Несмотря на то, что значений по умолчанию вполне достаточно для какого-нибудь обычного hover’а, когда вы работаете над чем-то более существенным, временные функции оказываются серьезным инструментом для тонкой настройки ваших анимаций!
Теперь, когда вы знаете, что делают временные функции, пришла пора узнать, как они это делают.
Заглянем под капот
Вы можете быть незнакомы с данным термином, однако я держу пари, что в действительности вам доводилось видеть кривую Безье. Черт побери, если вы использовали какой-либо графический пакет, то наверняка даже сами создавали её! Именно так, ибо когда вы используете инструмент Pen или Path для создания гладкой кривой, то, что у вас получается, — и есть кривая Безье! В нашем случае она — «волшебство» временной функции, описывающее тип ускорения на графике.
Данная кривая Безье соответствует значению ease (изображение принадлежит Smashing Magazine)
Если ваша реакция на впервые увиденную кривую Безье была подобна моей, у вас наверняка возник вопрос: как вообще такая кривая может быть построена по четырем точкам на графике?! Вряд ли смогу я вам объяснить это на словах, однако у меня есть фантастическая гифка, которая поможет мне в этом:
Рисование кривой Безье (изображение взято из Википедии)
Поскольку данная кривая строится по четырем точкам, мы называем ее кубической (cubic) кривой Безье, в отличие от квадратичной кривой (quadratic, по трем точкам) и кривой четвертого порядка (quartic, по пяти точкам).
Функция cubic-bezier()
С помощью функции cubic-bezier() вы можете манипулировать кривой так, как вам заблагорассудится, задавая при этом абсолютно любые параметры ускорения вашей анимации! Так что давайте посмотрим, как эта функция работает и каким образом она позволяет создавать собственные кривые Безье.
Во-первых, мы уже знаем, что кубическая кривая строится по четырем точкам: 0, 1, 2, 3. Во-вторых, важно помнить, что первая и последняя точки (0 и 3) уже определены на графике, где точка 0 всегда имеет значение 0;0 (снизу слева), а точка 3 — 1;1 (сверху справа).
EASE-IN-OUT
Давайте начнем с данного ключевого значения, поскольку и логику построения кривой, и переложение её на анимацию сейчас, вероятно, проще всего понять.
Совершенно симметричная кривая Безье, что означает, что ускорение и замедление анимации будет производиться с одинаковой скоростью (изображение принадлежит Smashing Magazine)
Точка 1 расположена на 0,42 по оси x и на 0 по оси y, в то время как точка 2 — на 0,58 и 1 соответственно. Результат — совершенно симметричная кривая Безье: ускорение и замедление анимации будет происходить с одинаковой скоростью. Отсюда и название ключевого слова.
Исходная анимация на Codepen
Кривая ease имеет крутое начало и много более плавное продолжение (изображение принадлежит Smashing Magazine)
Обратите внимание на более четкий наклон кривой в начале, в то время как конец её более вытянутый, — это напрямую оказывает физический эффект временной функции на анимацию. Когда изучите все примеры, не забудьте вернуться к демонстрации в начале, чтобы сравнить эффекты между собой.
EASE-IN И EASE-OUT
Кривые Безье: ease-in слева, ease-out справа (изображение пренадлежит Smashing Magazine)
LINEAR
Последнее ключевое значение, которое вообще-то к кривым не относится. Исходя из названия, значение linear свойства timing-function устанавливает одинаковую скорость в течение всей анимации, что означает, что вместо кривой Безье мы получим прямую линию. То есть в данном случае не имеется какой-либо модели ускорения для изображения на графике.
Значение linear подразумевает одинаковую скорость на протяжении всей анимации (изображение принадлежит Smashing Magazine)
Если вы вновь посмотрите демо в начале, то наверняка заметите, что несмотря на одинаковую общую продолжительность, некоторые из анимаций кажутся медленнее остальных. Почему же так происходит? Ну, например, у ease-in-out начало и завершение анимации проходит с оттяжкой. Поэтому, чтобы уложиться в заданную продолжительность, в основной части скорость анимации существенно выше. В виду такого поведения мы воспринимаем её и короче, и быстрее, тогда как, например, линейная анимация кажется нам длинной и растянутой.
Возможно, к этому моменту у вас уже возникло ощущение, что данная статья слишком уж медленно подходит к своей истинной сути, так что давайте прямо сейчас перейдем к рассмотрению функции cubic-bezier() и созданию собственных временных функций с её помощью.
Создание собственных моделей ускорения с помощью функции cubic-bezier()
Теперь, когда мы узнали ключевые значения свойства timing-function и соответствующие им кривые Безье, а также понаблюдали их воздействие на анимацию, давайте научимся создавать собственные модели ускорения с помощью манипуляций кривой.
Скришнот страницы сайта Cubic Bézier (изображение принадлежит Smashing Magazine)
На начальном этапе стандартные кривые временной функции — то, что надо, только различия между ними не так очевидны. Зато как только вы начнете создавать собственные кривые Безье, вы почувствуете, насколько мощным может быть их влияние на результирующую анимацию.
Просто взгляните на следующие примеры и обратите внимание на существенное различие между анимациями при их одинаковой общей продолжительности.
Исходная анимация на Codepen
Ну, а теперь давайте разберемся с самым первым из приведенных выше примеров и попытаемся понять, каким образом получился столь отличный от остальных эффект.
Пример нестандартной кривой Безье (изображение принадлежит Smashing Magazine)
Основное отличие данной временной функции от значений по умолчанию состоит в резком отклонении кривой от шкалы «прогрессии» (по оси y). Это обуславливает быстрый старт и завершение анимации, но затяжную паузу в середине (в том месте, где кривая выравнивается). Данная модель резко контрастирует с той, к которой мы привыкли с обычными временными функциями, которые используют противоположный подход, замедляя анимацию в начале и конце, а не по середине.
А теперь проявим изобретательность
Да-да: кривые Безье становятся еще более захватывающими! И кто бы мог подумать? Тем временем, границы воображения расширяются с открытием того, что лишь шкала времени (по оси x) ограничена на графике промежутком от нуля до единицы, в то время как шкала прогрессии (по оси y) может выходить за его рамки как снизу, так и сверху.
Шкала прогрессии — это именно то, о чем вы подумали: нижний конец (0) являет собой начало анимации, а верхний (1) — завершение. Как правило, кубическая кривая Безье всегда следует снизу вверх по данной шкале с разной интенсивностью, пока не достигнет конечной точки анимации. Тем не менее, возможность располагать точки 1 и 2 вне промежутка 0-1 позволяет кривой выходить за его пределы, что вызывает движение в обратном направлении! Как обычно, лучший способ понять это — посмотреть:
Кривая безье со значениями за пределами 0-1 (изображение принадлежит Smashing Magazine)
Исходная анимация на Codepen
И наоборот, вы могли бы разместить это «движение назад» в начале анимации, а также заставить кривую немного «выбежать» за предполагаемую конечную точку. Представьте, будто вы делаете пару шагов назад для разбега; затем, в конце, вы проноситесь мимо финиша, в результате чего вам приходится немного вернуться, чтобы узнать время, которое показал хронометр. Посмотрите пример, чтобы действительно понять, о чем идет речь. Кроме того, изучите кривую Безье, которая создает такой эффект.
Исходная анимация на Codepen
Кривая Безье со значениями за пределами 0-1 (изображение принадлежит Smashing Magazine)
Теперь у вас должно быть вполне ясное представление о том, как значения cubic-bezier() за пределами 0-1 могут физически повлиять на поведение анимации. Мы, конечно, можем глазеть на перемещающиеся кубики целый день, но давайте таки закончим данный раздел примером, который ясно покажет изобретательский подход в использовании временной функции.
Исходная анимация на Codepen
Всё верно: мы анимируем воздушный шарик! Чего. То ли это, что вам всегда хотелось делать с помощью CSS?
Кривая Безье, эмулирующая «отскакивающий» шарик (изображение принадлежит Smashing Magazine)
Данный пример отлично показывает, как кривая трансформируется в итоговую анимацию, поскольку кривая отражает её практически идеально. Сначала кривая проходит от начала шкалы прогрессии по прямой, заставляя шарик двигаться от её начала до конца с одинаковой скоростью. Затем, подобно замедлению шарика, кривая резко изгибается в обратном направлении, прежде чем начать постепенно возвращаться к вершине. На самом деле всё очень просто!
Так что как только вы освоите кривую и искусство манипулирования ею, будете умницей!
Временные функции и покадровая анимация CSS
Перед тем, как мы пойдем дальше, следует упомянуть о поведении временных функций при использовании их в покадровой анимации. Общий смысл тот же (в сравнении с переходами [transition]), однако есть одно исключение, которое стоит запомнить: когда вы применяете временную функцию к нескольким кадрам, она выполняется на каждом отдельном кадре, нежели на протяжении всей анимации.
То есть, если у вас имеется четыре кадра, которые перемещают квадрат от одного угла к другому внутри контейнера, и вы применяете временную функцию с «отскоком» (такую же, как мы использовали для шарика), каждое из четырех движений будет подвержено этому «отскоку», нежели вся анимация. Давайте посмотрим это поведение в действии и в коде.
Исходная анимация на Codepen (гифка получилась кривоватой)
Обратите внимание на то, что когда кадр 100% не определен, элемент просто возвращается к своему начальному состоянию. В данном случае это то, что нам нужно, поэтому определять этот кадр мы не будем. Из примера вполне ясно видно работу временной функции на всех четырех кадрах по тому, как квадрат на каждом из них отскакивает от стенок рамки.
Если для какого-либо конкретного кадра вам необходимо определить собственную временную функцию, то определите её прямо в коде этого кадра, как показано в следующем примере:
Временная функция steps()
Вы думали, что на этом наши приключения окончены? Как бы не так! Я ведь уже говорил вам, что CSS не ограничивается встроенными временными функциями!
Исходная анимация на Codepen
Как видите, все дело в определении количества отрезков анимации. Но имейте в виду, что оно не может быть отрицательным или десятичным числом. Есть и второй, не обязательный, аргумент, возможные значения которого — start и end (последнее является значением по умолчанию).
Значение start запускает анимацию в начале каждого шага, а end — в конце. Применительно к «движущемуся квадрату», данная картинка поможет лучше объяснить разницу между двумя этими значениями.
Различие значений start и end функции steps() (изображение принадлежит Smashing Magazine)
Как видите, со значением start анимация начинается немедленно, а при end — с задержкой в одну (в данном случае) секунду.
Изобретательный подход к «пошаговым» функциям
Наверняка из повседневных задач вам вряд ли так уж часто будет выпадать анимация движущегося квадрата, тем не менее с помощью функции steps() можно сделать уйму других крутых штук. Допустим, если в вашем распоряжении имеется несколько мультяшных спрайтов, то вы можете использовать уже изученную технику для создания анимации, используя всего пару CSS свойств! Давайте посмотрим на демо и код.
Исходная анимация на Codepen
Итак, у нас есть прямоугольник 125 пикселей в ширину с фоновым изображением на 2 000 пикселей, содержащим 16 кадров. Изначально это изображение расположено по левому краю прямоугольника, и всё, что нам предстоит сделать, — сдвигать его влево так, чтобы все 16 кадров прошли через маленькое «окошко» нашего прямоугольника. При «обычной» анимации кадры просто пролетели бы мимо, однако с функцией steps() фоновое изображение сдвигается влево ровно за 16 шагов, в достаточной мере показывая каждый кадр изображения. Вот так мы сделали мини-мультик всего лишь с помощью CSS анимаций!
Демонстрация способа смещения фонового изображения так, что каждый кадр пройдет через небольшое «окошко» (изображение принадлежит Smashing Magazine)
Еще одно забавное использование функции steps() я нашел благодаря Лиа Веру (кому же еще?), которая придумала весьма интересную анимацию компьютерного набора. О ней я вам сейчас и расскажу.
Исходная анимация на Codepen
Для начала, вам нужен какой-то текст. А также, к сожалению, вам необходимо знать, сколько символов он содержит, ибо вам придется использовать это количество в CSS. Еще одно условие: шрифт должен быть моноширинным для того, чтобы все символы имели одинаковую ширину.
Нам понадобятся две отдельные анимации: одна для курсора, другая для печати. Чтобы сделать курсор, необходимо всего лишь заставить мерцать черную рамку.
Как и предполагалось, рамка просто меняет свой цвет с черного на прозрачный и обратно. В данном случае функция steps() имеет определенный смысл: уберите её, и курсор, вместо того, чтобы «моргать», будет плавно появляться и исчезать.
Наконец, анимация печатания столь же проста. Всё, что нам нужно сделать, — уменьшить длину строки до нуля, а затем постепенно наращивать её за 11 шагов (по количеству символов).
Текст будет «раскрываться» по одной букве за шаг в течении восьми секунд, в то время как «курсор» ( border-right ) будет мигать постоянно. Техника проста настолько же, насколько и эффективна.
Исходная анимация на Codepen
Недостатком обоих примеров, показанных в этом разделе, является тот факт, что вы должны знать заранее количество кадров или символов для того, чтобы указать правильное количество шагов анимации. Если их количество изменится, вам придется изменить и код. Несмотря на это, мощь функции steps() видна невооруженным взглядом, как и поистине фантастическая функциональность временных функций CSS в целом.
Поддержка браузерами
Понятное дело, что вы не сможете использовать временные функции CSS, если браузер не поддерживает CSS переходы и покадровую анимацию. К счастью, в наши дни поддержка осуществляется весьма неплохо.
ПОДДЕРЖКА CSS TRANSITIONS
ПОДДЕРЖКА ВРЕМЕННЫХ ФУНКЦИЙ CSS
Так что же мы узнали о временных функциях CSS? Давайте подытожим.
И, несмотря на кросс-платформенность описанных технологий, это не было бы статьей о техниках CSS 3, если бы я не упомянул о прогрессивном улучшении. Всегда идите от простого к сложному: убедитесь, что ваша работа доступна на устройствах и в браузерах, которые не поддерживают данный функционал, перед тем, как создавать эффекты для браузеров, которые смогут их обработать.
А теперь вперед! Счастливых шажков и искривлений!