transition-duration в CSS


Содержание

Плавная трансформация | CSS свойство transition

Псевдокласс :hover позволяет элементам быть менее статичными, изменяя их свойства при наведении мышки.

Благодаря свойству transition (w3.org) можно сделать плавный переход между состояниями элемента.

Свойство Описание
transition-property свойство [список возможных], на которое распространяется трансформация. При необходимости воздействия на несколько свойств, они перечисляются через запятую.
  • all — все
  • none — никто
transition-duration время, в течении которого происходит трансформация. transition-delay время, по истечении которого происходит трансформация. transition-timing-function указывает как должны изменяться промежуточные значения в кривой времени. Например, начинать развиваться медленно, а потом ускоряться. Трансформация может происходить и плавно на протяжении всего участка времени [cubic-bezier], и рывками в заданное количество шагов [steps].
  • ease, он же cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear, он же cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in, он же cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out, он же cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out, он же cubic-bezier(0.42, 0, 0.58, 1.0)
  • step-start, он же steps(1, start)
  • step-end, он же steps(1, end) , он же steps(1)

Популярные сочетания transition с другими свойствами, например, opacity или transform

100 комментариев:

Наташа, спасибо.
Применил кручение на картинки. NMitra Пожалуйста! Приятно, что записи имеют применение. Анонимный Наташа, БОЛЬШОЕ Вам спасибо. Отличный блог, многое искал и нашел как раз в вашем блоге. Что больше всего радует- это написание статей понятным языком. NMitra Такие слова очень радуют слух и мотивируют на новые статьи! Космо Мизраил Горыныч А вы случаем не встречались с Даной Домирани? О_О Тоже великая дизайнерша!) NMitra Спасибо за комплимент :) Только до «великой» мне ещё далековато.
К сожалению, не встречалась. Космо Мизраил Горыныч ну почему же — вполне великая ;)
только вот последний пример дёргается как контуженый XD
очень порадовало свойство transform >_ NMitra М-да. Выпивающие, да ещё и контуженные снеговики :) По-хорошему нужно применять либо увеличение картинки, либо выплывающий текст. Из-за того, что мышка попадает то на изображение, то на область текста и получается не очень хорошо.

Никак не соберусь написать статью про transform. Космо Мизраил Горыныч NMitra, попробуйте со снеговиками так: пусть будет div, и в классах что-то типа: div.block6:hover img < . >div.block6:hover img:after < . >NMitra Супер! Вы правы, спасибо! Сама же написала только статью — http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. :) Космо Мизраил Горыныч да, вижу >_ Космо Мизраил Горыныч Чёт я вас почитываю-почитываю, и мне приспичило вдруг создать свой блог!))))
Ссылко внизу будет :)
Тематика почти такая же, может быть, найдём друг у друга что-нибудь интересное ;)
Мож потом баннерами обменяемся?) NMitra Вот теперь красиво! Уважаю за такое внимание к деталям и желание «допилить» до идеала.

На самом деле мне приятно, что получается у читателей находить творческую нотку. Обращайся, помогу, чем смогу.

И, конечно, интересно взглянуть на ссылку ;) Космо Мизраил Горыныч я на своём блоге попробую «проапгрейдить» снеговиков, так как мне тоже нужен этот эффект для моей галереи >_ NMitra Да, с фантазией у меня тоже туго, благо читатели всё время удивляют.

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

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

Посмотри, плиз, выплывающую панель вместо футера — http://prilozhenie13.blogspot.com/. Она фиксированная. Вот здесь код — http://shpargalkablog.ru/2011/08/svoya-panel-navigatsii-blogger.html. Где-то с версткой намудрила, возможно с float: _left.

В Firefox нормально, в Хроме кнопка «последние» (в CSS #footer-dva) «плывёт». Добавляю position: absolute, ситуация меняется, теперь в Firefox наблюдается кривобразие. В IE гаджеты друг под другом.

Пока идеи отсутствуют. Космо Мизраил Горыныч ну я тоже в ява-скрипте ни бум-бум)))))

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

Этот казёл не даёт хтмл публиковать, видимо, создал на домашнем форуме для вас страничку: http://city.first-forum.com/h10-page
ну вы через огненную козявку код скопируете :) NMitra В понедельник посмотрю, сейчас день семьи ))) NMitra Сделала, зацени — http://shpargalkablog.ru/2011/08/svoya-panel-navigatsii-blogger.html. VivaL Здравствуйте, спасибо за сайт, много полезной информации.
Вот такой вопрос у меня: можно ли сделать, чтобы эффект-«увеличивавшие объекта в два раза transform: scale(2)» запускался от клика мышкой.
Если можно, то в какую сторону копать?
Спасибо. NMitra Не ставила перед собой данной задачи. Я бы смотрела в сторону getElementById(»).style. Но сомневаюсь, браузеры используют префикс.

Или сделала что-то вроде

Или :target — http://shpargalkablog.ru/2012/02/psevdoklassy-css.html

Для картинок http://shpargalkablog.ru/2011/05/kak-uvelichit-izobrazhenie.html phenom Каким образом можно сделать задержку что бы рамка появлялась на элементе не мгновенно как сейчас,а через секунду например.Спасибо.
.td_men:hover,.catalog_men:hover
<
border-left:3px solid #f7941f;
border-top:3px solid #f7941f;
border-right:3px solid #f7941f;
border-bottom:3px solid white;
-moz-border-radius: 7px 7px 0px 0px;
-webkit-border-radius: 7px 7px 0px 0px;
background-color:white;
z-index:999999;
>
.td_men,.catalog_men
<
border-left:3px solid white;
border-top:3px solid white;
border-right:3px solid white;
border-bottom:0px solid white;
-moz-border-radius: 7px 7px 0px 0px;
-webkit-border-radius: 7px 7px 0px 0px;
background-color:white;
> NMitra .td_men:hover,.catalog_men:hover
<
-moz-transition: all 1s 1s; -webkit-transition: all 1s 1s; -o-transition: all 1s 1s;
> Анонимный Все никак не мог найти время на изучение transition&transform, а ларчик-то просто открывался. Спасибо за доступную статью :) NMitra Пожалуйста, приходите ещё :) Андрей Столько интересного и в одном месте ))
Хочется применить подобные фишки для своих сайтов, только банер сделать, чтоб не через IE заходили. NMitra Пусть заходят, эффекта постепенного изменения они не увидят, но всё будет функционировать как при :hover Den А как быть, если у блока не сплошной цвет, а градиент и его надо плавно перевести в другие цвета градиента? NMitra Увы, не все свойства реализуются (см. http://dev.w3.org/csswg/css3-transitions/#properties-from-css- ) Анонимный Спасибо большое. NMitra Рада помочь! Сергей Хамзин Постоянно стараюсь не использовать яваскрипты на страницах своих сайтов и постоянно убеждаюсь что и на css можно реализовать много интересных вещей.
Автор вы лучший сколько разбираюсь с css ни где ещё не видел такого подробного описания с нормальными понятными примерами
5 балов NMitra Спасибо, Сергей! Приятно осознавать, что твои труды оценены! купить кулер вот отличненько! спасибо! сейчас наведу красоту у себя ))) Анонимный Отличная статья, спасибо! NMitra Рада быть полезной! Сергей Хамзин Уважаемые подскажите что делать с IE 6-7-8 они сильно туповатые и всё режут на корню все усилия и старания
уже даже на костыль согласен из яваскрипта, если кто имеет опыт поделитесь кому не жалко. NMitra Посмотрите тут http://stackoverflow.com/questions/6544162/imitate-css3-transition-in-ie Анонимный Добрый.
Подскажите плз, как связать transition с height:auto ?
по существу оно работает, разворачивает на высоту элемента, но без замедления, как буд-то 0s стоит время. NMitra Добрый! Ничего не получиться, таковы условия w3.org http://dev.w3.org/csswg/css-transitions/#properties-from-css-

Нужно, чтобы оба значения были указаны или в процентах или в величинах, например px. Есть ещё calc. Анонимный Спасибо большое за ответ!
В процентах таже картина, разворачивается, но без задержки.
А не подскажите может какойнить другой способ?
Нужно, чтоб при длинном тексте, часть теста скрывалась (видимая часть должна быть одинаковой), а при наведении курсора раскрывалась, но только на размер элемента (текста)
Спасибо. NMitra Смотрите в сторону позиционирования. Вам нужно показать поверх всего содержания текст или чтобы развёрнутый текст сдвигал остальной контент? Анонимный Пока сдвигает контент, но я не против, смотрится нормально, хочется пока чтоб показывало (разворачивало) только по размеру текста NMitra Ваш вопрос поняла, подумаю до конца недели, может завтра что и напридумаю. Анонимный Буду премного благодарен.
Спасибо за отзывчивость. NMitra Посмотрела, подумала. Разворачиваться плавно не будет. Можно другой какой-нибудь эффект или задать фиксированное значение или JavaScript

#blok <
opacity: .5;
transition: 1s;
height:30px;
>
#blok:hover <
opacity: 1;
height:auto;
> Анонимный Спасибо за попытку :(
фикисированную и оставлю пока, раз все так сложно.
А по поводу других эффектов, какие есть варианты?
. хотя, думаю самый оптимальный и симпотичный вариант это разворачивание.
Спасибо! Виталий Вот кстати сам ресурс:
http://shopping.mk.ua/catalog/grupa/69
. эт по поводу разворачивания. оцените, нормально? Виталий Чуток ошибся, вот:

http://shopping.mk.ua/catalog/grupa/69 NMitra Нормально, как добились?

Хотя на мой взгляд абсолютно бессмысленная информация. Для меня как покупателя это просто набор цифр и букв. Особенно когда идёт полное повторение заголовка-ссылки. Виталий Добился как и было :), как и договаривались, постоянная высота блока, на высоту текста не получается :(
Повторение заголовков лишнее, попадается редко (долго редактировать), ну или когда нет описания, а так там обычно краткие характеристики, вроде так проще ориентироваться в отличиях. Анонимный Сергей.
Спасибо!, статья очень помогла!.
NMitra Пожалуйста, Сергей. Eduard Korotchuk Отличный материал. NMitra Благодарю 161leeroy а как сделать,чтоб цвет менялся два раза?например когда наводишь на ссылку,то она сначала загорается одним цветом ,а потом другим NMitra http://shpargalkablog.ru/2012/03/animaciya-css.html

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 раза.
Как сделать что бы увеличивался толь в одну сторону. Например в право.
Или чтобы. С верху в низ то есть по высоте.

NMitra Здравствуйте, так?
transform: scale(2,1); Анонимный Спасибо Вам за ответ. Так тоже забавно и интересно, пригодится. Спасибо.
Но я хотел бы. Что бы например с права на лево. И правый край оставался на месте а двигался лишь левый край.
NMitra .transition-scale <
position: relative;
left: 0;
z-index: 2;
background: #808991;
color: #FFF;
margin: 0 auto;
padding: 10px;
text-align: center;
max-width: 500px;
font-size: 20px;
border: 4px ridge black;
cursor: pointer;
transition: 3s linear;
>
.transition-scale:hover <
transform: scale(2,1);
left: 262px;
> Анонимный Супер СПАСИБО Вам.
А это Вам забавная штучка. Посмотрите. Как обещал, нарою поделюсь. Спасибо.
P.S.
Блин, какая у Вас капча трудная. Еле можно пролезть .
Анонимный Забыл добавить. Штучку.
http://codepen.io/rileyjshaw/pen/LIwdc
NMitra Забавная штучка :)
От Гугла, прорываются только самые настойчивые :) Без капчи, спама стало много. Анонимный Ой простите зашёл с не перезагруженной странице и вижу нету. Думал опять что не так сделал.
Извините.
Спам да. Но у Вас зверская.
Спасибо Вам ещё раз.
Андрей Фролов Добрый день.

Спасибо за вашу статью, очень интересна.

Скажите а можно ли сделать чтобы блок появлялся через несколько секунд сам, а не при наведении. NMitra Добрый день, можно с помощью анимации http://shpargalkablog.ru/2012/03/animaciya-css.html
Пример: http://shpargalkablog.ru/2013/06/popup.html Андрей Фролов Спасибо большое. буду изучать. va0816 некоторые простые анимации можно сделать без animation
Например можно сделать такую неоновую рамку: http://jsfiddle.net/x8v6wvt5/ NMitra setInterval — это и есть анимация, только в JavaScript. Или я не поняла вас? Анонимный А как сделать что бы фон менялся плавно туда сюда у дива без ховера? NMitra С помощью animation
Как здесь http://shpargalkablog.ru/2013/12/blink-text.html только с фоном
Подробнее http://shpargalkablog.ru/2012/03/animaciya-css.html Анонимный Да, но где выставлять стартовый фон, а где финальный? Просто если поставить диву какой либо бэкграунд в стилях, он патом не меняется Анонимный А все понял, вместо колор нужно прописать background) NMitra «патом» неправильно писать, нужно «потом».
Извините за замечание, аж глаз режет. Анонимный хорошо, сам не заметил) Анонимный А подскажите пожалуйста, возможно ли совместить две анимации, первая — это когда меняется фон у круга, скажем два-три раза, а затем идет от него box-shadow (похоже как разводы на воде от упавшего в нее камня), причем когда начинается эффект box-shadow фон в круге уже не меняется и затем анимация начинается заново, такое возможно? может есть какие то команды дополнительные что бы регулировать анимацию, был бы очень признателен за совет. Вот пример двух анимаций, о возможности совмещения которых я говорю:

#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;>

#uptocall <
animation: uptocall 1.5s linear 3 forwards, uptocall1 1.5s 4.5s linear infinite;
> NMitra Или так http://jsfiddle.net/NMitra/07Lqsvrk/1/ ?

#uptocall <
animation: 10s linear infinite;
animation-name: uptocall, uptocall1;
> Neon Rain Скажите, а как здесь выставить, что бы это все патом повторялось и делается ли бордер небольшой в тенях на конце разводов второй анимации, т.е. вся тень одного тона светлого более длинная, но на конце бордер скажем 1px ? Если Вам не трудно и это подсказать) Такие эффекты я в ЦСС не использовал так широко, трудно еще по началу без хороших советов, но разобраться необходимо.

Свойство CSS Transition

Свойство CSS Transition нужен для установки анимационного перехода из одного состояния в другое. Анимация работает с помощью псевдоэлементов :hover и :active , т.е. при переходе объекта из одного состояния в другое.

Синтаксис CSS transition

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

Примеры со свойством Transition

Пример #1. Анимация в html через transition

На странице преобразуется в следующее

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

  • all — плавное действие применяется ко всем свойствам, это касается цвета (color), фона (background). Вместо all можно было написать color , тогда плавный переход распространился бы только на цвет
  • 1s — время в течении которого осуществляется переход (можно задавать в формате милисекунд: 1000ms);
  • linear — объект изменяется с постоянной скоростью (линейно). Есть и другие варианты эффектов (о них будет рассказано чуть ниже)

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

Пример #2. Увеличение объекта в html без смещения других объектов

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

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

1. Параметр transition-property

Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения

  • all — ко всему объекту (можно опустить, если задано время)
  • color — к цвету текста
  • background — к цвету фона объекта
  • width , height — к изменению габаритов по ширине и высоте соответственно
  • none — анимация отсутствует (по умолчанию стоит у каждого элемента)

Для включения нескольких свойств, их можно перечислить через запятую.

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Параметр transition-duration можно задавать отдельным свойством в CSS:

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

Где value может принимать значения:

  • ease (значение по умолчанию) — замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear — равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in — замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out — замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out — замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
  • step-start — мгновенный старт, равносильно параметру steps(1, start)
  • step-end — мгновенное исполнение в конце, равносильно параметру steps(1, end)
  • cubic-bezier(a1,b1,a2,b2) — задание собственного изменения скорости
  • steps(a,b) — изменение рывками

CSS 3 Timing Functions и с чем их едят

Хей народ, пристегните ремни и держитесь покрепче, ибо наступил действительно волнительный момент: вам предстоит разобраться в тонкостях чрезвычайно интересных временных функций CSS!

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

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

О временной функции в CSS

Данное свойство — одно из самых неочевидных в CSS анимации, в то время как большинство свойств из этой категории вполне самопонятны. Тем не менее, суть его в контроле и изменении скорости анимации: оно определяет точки ускорения и замедления за указанный период времени.

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

Заметка: свойства timing-function не существует. Называя это свойство, на самом деле я имею в виду transition-timing-function и animation-timing-function .

Прежде чем пойти дальше, давайте познакомимся с синтаксисом и посмотрим, как он вписывается в весь процесс определения CSS анимации. Простоты ради, давайте используем CSS переход и пропишем все transition-свойства по отдельности:

Сокращенная запись перехода не имеет строгого порядка значений, но требует, чтобы значение transition-delay находилось после значения transition-duration (не обязательно непосредственно после). Кроме того, значение transition-duration является единственным необходимым для определения функции. А поскольку значения по умолчанию у остальных параметров вполне приемлемы, для определения перехода вам редко понадобится нечто большее, чем:

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

Теперь, когда вы знаете, что делают временные функции, пришла пора узнать, как они это делают.

Заглянем под капот

Многие из вас наверняка не заостряли свое внимание на допустимых значениях свойства timing-function . Так вот, их пять: ease (по умолчанию), ease-in , ease-out , ease-in-out и linear . При этом данные значения — всего лишь короткая запись определения кривой Безье.

Вы можете быть незнакомы с данным термином, однако я держу пари, что в действительности вам доводилось видеть кривую Безье. Черт побери, если вы использовали какой-либо графический пакет, то наверняка даже сами создавали её! Именно так, ибо когда вы используете инструмент Pen или Path для создания гладкой кривой, то, что у вас получается, — и есть кривая Безье! В нашем случае она — «волшебство» временной функции, описывающее тип ускорения на графике.

Данная кривая Безье соответствует значению ease (изображение принадлежит Smashing Magazine)

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

Рисование кривой Безье (изображение взято из Википедии)

Поскольку данная кривая строится по четырем точкам, мы называем ее кубической (cubic) кривой Безье, в отличие от квадратичной кривой (quadratic, по трем точкам) и кривой четвертого порядка (quartic, по пяти точкам).

Функция cubic-bezier()

А вот сейчас вам станет еще интереснее, ибо я скажу, что вы можете задавать кубическую кривую с помощью функции cubic-bezier() , используя её вместо ключевых значений свойства timing-function . Полагаю, вам необходимо некоторое время, дабы сдержать волнение.

С помощью функции cubic-bezier() вы можете манипулировать кривой так, как вам заблагорассудится, задавая при этом абсолютно любые параметры ускорения вашей анимации! Так что давайте посмотрим, как эта функция работает и каким образом она позволяет создавать собственные кривые Безье.

Во-первых, мы уже знаем, что кубическая кривая строится по четырем точкам: 0, 1, 2, 3. Во-вторых, важно помнить, что первая и последняя точки (0 и 3) уже определены на графике, где точка 0 всегда имеет значение 0;0 (снизу слева), а точка 3 — 1;1 (сверху справа).

Данное условие оставляет нам всего две точки, которые необходимо разместить на графике, и сделать это можно с помощью функции cubic-bezier() ! Она принимает четыре аргумента: первые два — координаты x, y первой точки; вторые два — координаты x, y второй точки.

Чтобы вы освоили синтаксис и то, как эта функция создает кривую, а также её физическое влияние на анимацию, я покажу вам пять ключевых значений свойства timing-function , их эквивалент для cubic-beizer() и результирующий эффект анимации.

EASE-IN-OUT

Давайте начнем с данного ключевого значения, поскольку и логику построения кривой, и переложение её на анимацию сейчас, вероятно, проще всего понять.

Совершенно симметричная кривая Безье, что означает, что ускорение и замедление анимации будет производиться с одинаковой скоростью (изображение принадлежит Smashing Magazine)

Точка 1 расположена на 0,42 по оси x и на 0 по оси y, в то время как точка 2 — на 0,58 и 1 соответственно. Результат — совершенно симметричная кривая Безье: ускорение и замедление анимации будет происходить с одинаковой скоростью. Отсюда и название ключевого слова.

Посмотрите на демонстрацию и вы увидите физический эффект значения ease-in-out , сравните его с другими значениями.

Данное ключевое значение является значением по умолчанию свойства timing-function . На самом деле, оно очень похоже на предыдущее, хотя ускорение анимации происходит быстрее, а замедление — более постепенно.

Кривая ease имеет крутое начало и много более плавное продолжение (изображение принадлежит Smashing Magazine)

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

EASE-IN И EASE-OUT

Как не сложно догадаться, данные ключевые значения имеют противоположный смысл. ease-in плавно ускоряет анимацию развивая максимальную скорость к её завершению, в то время как ease-out плавно снижает изначально максимальную скорость перед завершением анимации. Следуя логике, ключевое значение ease-in-out , которое мы рассмотрели ранее, — отличная комбинация этих двух кривых Безье.

Кривые Безье: ease-in слева, ease-out справа (изображение пренадлежит Smashing Magazine)

LINEAR

Последнее ключевое значение, которое вообще-то к кривым не относится. Исходя из названия, значение linear свойства timing-function устанавливает одинаковую скорость в течение всей анимации, что означает, что вместо кривой Безье мы получим прямую линию. То есть в данном случае не имеется какой-либо модели ускорения для изображения на графике.

Значение linear подразумевает одинаковую скорость на протяжении всей анимации (изображение принадлежит Smashing Magazine)

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

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

Создание собственных моделей ускорения с помощью функции cubic-bezier()

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

К настоящему моменту предполагается, что вы уже умеете располагать точки 1 и 2 на графике с помощью функции cubic-bezier() , а также ясно представлять, каким образом это влияет на анимацию. Хотя, если вы делаете это «в слепую», не удивительно, что данное занятие может очень быстро надоесть.

К счастью, существуют на Земле такие люди, как Лиа Веру (Lea Verou), которые, вероятно, не успокоятся пока кодинг на CSS не станет еще легче! Ли разработала приложение «Кубический Безье» для создания собственных кривых Безье и сравнения их со стандартными. Так что вместо того, чтобы гонять туда-сюда циферки в cubic-bezier() , зайдите на Cubic Bézier, поиграйтесь с кривой да посмотрите на результат. Это куда круче!

Скришнот страницы сайта Cubic Bézier (изображение принадлежит Smashing Magazine)

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

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

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

Пример нестандартной кривой Безье (изображение принадлежит Smashing Magazine)

Основное отличие данной временной функции от значений по умолчанию состоит в резком отклонении кривой от шкалы «прогрессии» (по оси y). Это обуславливает быстрый старт и завершение анимации, но затяжную паузу в середине (в том месте, где кривая выравнивается). Данная модель резко контрастирует с той, к которой мы привыкли с обычными временными функциями, которые используют противоположный подход, замедляя анимацию в начале и конце, а не по середине.

А теперь проявим изобретательность

Да-да: кривые Безье становятся еще более захватывающими! И кто бы мог подумать? Тем временем, границы воображения расширяются с открытием того, что лишь шкала времени (по оси x) ограничена на графике промежутком от нуля до единицы, в то время как шкала прогрессии (по оси y) может выходить за его рамки как снизу, так и сверху.

Шкала прогрессии — это именно то, о чем вы подумали: нижний конец (0) являет собой начало анимации, а верхний (1) — завершение. Как правило, кубическая кривая Безье всегда следует снизу вверх по данной шкале с разной интенсивностью, пока не достигнет конечной точки анимации. Тем не менее, возможность располагать точки 1 и 2 вне промежутка 0-1 позволяет кривой выходить за его пределы, что вызывает движение в обратном направлении! Как обычно, лучший способ понять это — посмотреть:

Кривая безье со значениями за пределами 0-1 (изображение принадлежит Smashing Magazine)

Точка 2 расположена за пределами обычного промежутка 0-1 на -0,5 , что в свою очередь тянет кривую вниз. Посмотрите следующее демо и вы увидите эффект «подпрыгивания» в середине анимации.

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

Кривая Безье со значениями за пределами 0-1 (изображение принадлежит Smashing Magazine)

Теперь у вас должно быть вполне ясное представление о том, как значения cubic-bezier() за пределами 0-1 могут физически повлиять на поведение анимации. Мы, конечно, можем глазеть на перемещающиеся кубики целый день, но давайте таки закончим данный раздел примером, который ясно покажет изобретательский подход в использовании временной функции.

Всё верно: мы анимируем воздушный шарик! Чего. То ли это, что вам всегда хотелось делать с помощью CSS?

Суть анимации в «надувании» шарика по клику таким образом, что он взлетит к «потолку» и слегка отскочет от него, как по-настоящему. Значение cubic-bezier() за границей 0-1 и есть тот инструмент, который позволит нам создать этот эффект «отскока», повторяя реалистичное поведение. В представленном фрагменте кода показаны координаты, выставленные в функции cubic-bezier() , а далее показана полученная кривая.

Кривая Безье, эмулирующая «отскакивающий» шарик (изображение принадлежит Smashing Magazine)

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

Так что как только вы освоите кривую и искусство манипулирования ею, будете умницей!

Временные функции и покадровая анимация CSS

Перед тем, как мы пойдем дальше, следует упомянуть о поведении временных функций при использовании их в покадровой анимации. Общий смысл тот же (в сравнении с переходами [transition]), однако есть одно исключение, которое стоит запомнить: когда вы применяете временную функцию к нескольким кадрам, она выполняется на каждом отдельном кадре, нежели на протяжении всей анимации.

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

Исходная анимация на Codepen (гифка получилась кривоватой)

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

Если для какого-либо конкретного кадра вам необходимо определить собственную временную функцию, то определите её прямо в коде этого кадра, как показано в следующем примере:

Временная функция steps()

Вы думали, что на этом наши приключения окончены? Как бы не так! Я ведь уже говорил вам, что CSS не ограничивается встроенными временными функциями!

В данном разделе мы изучим концепцию «пошаговых» функций и заменим кривые прямыми линиями с помощью временной функции steps .

Данная функция весьма полезна, несмотря на свою специфичность. Она позволяет разбить анимацию на отрезки, что будет отличать её от обычного анимированного движения. Например, если нам надо переместить квадрат на 400 пикселей вправо за 4 шага в течение 4 секунд, то вместо плавного движения он будет «прыгать» на 100 пикселей каждую секунду. А теперь давайте взглянем на код данного примера. Он, должно быть, просто дуновение свежести после погружения в тонкости функции cubic-bezier() !

Как видите, все дело в определении количества отрезков анимации. Но имейте в виду, что оно не может быть отрицательным или десятичным числом. Есть и второй, не обязательный, аргумент, возможные значения которого — start и end (последнее является значением по умолчанию).

Значение start запускает анимацию в начале каждого шага, а end — в конце. Применительно к «движущемуся квадрату», данная картинка поможет лучше объяснить разницу между двумя этими значениями.

Различие значений start и end функции steps() (изображение принадлежит Smashing Magazine)

Как видите, со значением start анимация начинается немедленно, а при end — с задержкой в одну (в данном случае) секунду.

Ну, и ради пущей всеобъемлющности материала, отметим, что у функции step() есть два предопределенных аргумента: step-start и step-end , эквивалентные записи steps(1, start) и steps(1, end) соответственно.

Изобретательный подход к «пошаговым» функциям

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

Итак, у нас есть прямоугольник 125 пикселей в ширину с фоновым изображением на 2 000 пикселей, содержащим 16 кадров. Изначально это изображение расположено по левому краю прямоугольника, и всё, что нам предстоит сделать, — сдвигать его влево так, чтобы все 16 кадров прошли через маленькое «окошко» нашего прямоугольника. При «обычной» анимации кадры просто пролетели бы мимо, однако с функцией steps() фоновое изображение сдвигается влево ровно за 16 шагов, в достаточной мере показывая каждый кадр изображения. Вот так мы сделали мини-мультик всего лишь с помощью CSS анимаций!

Демонстрация способа смещения фонового изображения так, что каждый кадр пройдет через небольшое «окошко» (изображение принадлежит Smashing Magazine)

Еще одно забавное использование функции steps() я нашел благодаря Лиа Веру (кому же еще?), которая придумала весьма интересную анимацию компьютерного набора. О ней я вам сейчас и расскажу.

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

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

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

Как и предполагалось, рамка просто меняет свой цвет с черного на прозрачный и обратно. В данном случае функция steps() имеет определенный смысл: уберите её, и курсор, вместо того, чтобы «моргать», будет плавно появляться и исчезать.

Наконец, анимация печатания столь же проста. Всё, что нам нужно сделать, — уменьшить длину строки до нуля, а затем постепенно наращивать её за 11 шагов (по количеству символов).

Текст будет «раскрываться» по одной букве за шаг в течении восьми секунд, в то время как «курсор» ( border-right ) будет мигать постоянно. Техника проста настолько же, насколько и эффективна.

Теперь мы можем дополнить этот замечательный пример, попробовав обратный эффект — удаление текста. Для этого нужно изменить ключевое слово кадра с from на to и затем добавить параметр animation-fill-mode со значением forwards , чтобы удостовериться, что когда текст «удалится» (т. е. когда анимация завершится), он останется «удаленным». Посмотрите на демо.

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

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

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


ПОДДЕРЖКА CSS TRANSITIONS

Браузер С префиксом Без префикса
Internet Explorer Нет 10+
Firefox 4+ ( -moz- ) 16+
Chrome 4+ ( -webkit- ) 26+
Safari 3.1+ ( -webkit- ) 6.1+
Opera 10.5+ ( -o- prefix) 12.1+

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

ПОДДЕРЖКА ВРЕМЕННЫХ ФУНКЦИЙ CSS

Браузер С префиксом Без префикса
Internet Explorer Нет 10+
Firefox 5+ ( -moz- ) 16+
Chrome 4+ ( -webkit- ) Не поддерживается
Safari 4+ ( -webkit- ) Не поддерживается
Opera 12 ( -o- prefix), 15+ ( -webkit- prefix) Только 12.1 (не поддерживается после перехода на WebKit)

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

Так что же мы узнали о временных функциях CSS? Давайте подытожим.

  1. Они определяют, когда анимация ускоряется и замедляется
  2. Они гораздо круче, нежели набор предопределенных значений
  3. Вы можете создавать эффект «отскока» с помощью значений cubic-bezier(), выходящих за пределы промежутка 0-1
  4. Вы можете разбить анимацию на несколько шагов/отрезков
  5. Поддержка браузерами великолепна и только улучшается

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

А теперь вперед! Счастливых шажков и искривлений!

Свойство transition-duration

На предыдущей странице мы узнали о первом свойстве семейства transition из четырех — transition-property, которое позволяет выбирать, на какие свойства будет распространяться переход. Теперь настало время познакомиться со следующим — transition-duration .

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

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

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

Теперь наш переход работает так, как нужно:

Вы наверняка заметили, что мы указали еще один стиль для состояния при наведенном курсоре — это letter-spacing: 2px . Как видно на анимации выше, расстояние между буквами меняется резко, без плавности. Так происходит потому, что мы не указывали это свойство в значении transition-property .

Чтобы сделать плавной смену свойства letter-spacing, можно пойти двумя путями: либо добавить его в список значений transition-property , либо изменить значение transition-property на all . Во втором случае плавный переход станет распространяться на все анимируемые свойства (конечно, в том случае, если они будут добавлены). Ключевое слово all упрощает запись, но оно не подойдет, если нужно исключить какое-то свойство из анимации.

Своя скорость для каждого свойства

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

Такая запись будет означать, что свойство color перейдет от своего начального значения к конечному за одну секунду, background-color — за половину секунды, а letter-spacing — за две секунды.

transition-duration

Easily manage projects with monday.com

The transition-duration property, normally used as part of transition shorthand, is used to define the duration of a specified transition. That is, the length of time it will take for the targeted element to transition between two defined states.

The value can be one of the following:

  • A valid time value (defined in seconds or milliseconds)
  • A comma-separated list of time values, for transitioning multiple properties on a single element

The default value for transition-duration is 0s , meaning that no transition will take place and the property change will take place immediately, even if the other transition-related properties are defined. The time value can be expressed as a decimal-based number for more precise timing and negative values are not allowed.

The following CodePen shows a hover effect on a box that uses a transition-duration value of 1s to gradually change the background color:

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

IE10 (the first stable version of IE to support transition-duration ) does not require the -ms- prefix.

transition-duration

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

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

Описание

CSS свойство transition-duration указывает, продолжительность анимации перехода в секундах(s) или миллисекундах(ms).

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

Примечание: всегда указывайте значение свойства transition-duration, так как, если его не указать, продолжительность будет равна 0 и никакого эффекта не будет.

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

Синтаксис

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

Значение Описание
время Указывает, сколько секунд(s) или миллисекунд(ms) будет продолжительность анимации перехода.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

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

Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.

свойство transition-durationCSS3-генератор ☛

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.

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

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

Значение по умолчанию 0s
Наследуется Нет
Применяется Ко всем элементам, к псевдоэлементам ::before и ::after
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Пример

В данном примере при наведении курсора на блок текста меняется цвет фона под блоком.

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

Примечание

Chrome до версии 26.0, Safari до версии 6.1 и Andro >-webkit-transition-duration .

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

Firefox до версии 16 поддерживает свойство -moz-transition-duration .

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

Спецификация Статус
CSS Transitions Рабочий проект

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
10 1 26 11.6 12.10 3 6.1 4 16
Android Firefox Mobile Opera Mobile Safari Mobile
2.1 4 16 10 12.10 3.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Свойство transition-duration

Свойство transition-duration указывает какое количество времени занимает анимированный переход (можно указать несколько через запятую).

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

  • — точное значение времени перехода. Задается в секундах s или в миллисекундах ms
Значение по умолчанию
Применимо ко всем элементам, псевдоэлементам :before и :after
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

Твой код:
Результат:

Заметки

Это свойство относится к модулю CSS Transitions Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.

Safari 3.1 и выше Chrome 1 и выше поддерживают аналогичное свойство -webkit-transition-duration.

Opera 10.5 и выше поддерживает аналогичное свойство -o-transition-duration но только для блочных и строчных элементов.

Разработчики Firefox заявляют поддержку аналогичного свойства -moz-transition-duration с выходом Firefox 4.0.

CSS-анимации

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.

CSS transitions

Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.

Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color .

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

При клике на эту кнопку происходит анимация её фона:

Есть всего 5 свойств, задающих анимацию:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Далее мы изучим их все, пока лишь заметим, что общее свойство transition может перечислять их все, в порядке: property duration timing-function delay , а также задавать анимацию нескольких свойств сразу.

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

Далее мы рассмотрим свойства анимации по отдельности.

transition-property

Список свойств, которые будут анимироваться, например: left , margin-left , height , color .

Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

transition-duration

Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms .

transition-delay

Задержка до анимации. Например, если transition-delay: 1s , то анимация начнётся через 1 секунду после смены свойства.

Возможны отрицательные значения, при этом анимация начнётся с середины.

Например, вот анимация цифр от 0 до 9 :

Она осуществляется сменой margin-left у элемента с цифрами, примерно так:

В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:

Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay .

В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:

В JavaScript это делается дополнительной строкой:

transition-timing-function

Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.

Самое сложное, но при небольшом изучении – вполне очевидное свойство.

У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.

Кривая Безье

В качестве временной функции можно выбрать любую кривую Безье с 4 опорными точками, удовлетворяющую условиям:

  1. Начальная точка (0,0) .
  2. Конечная точка (1,1) .
  3. Для промежуточных точек значения x должны быть в интервале 0..1 , y – любыми.

Синтаксис для задания кривой Безье в CSS: cubic-bezier(x2, y2, x3, y3) . В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.

Она указывает, как быстро развивается процесс анимации во времени.

  • По оси x идёт время: 0 – начальный момент, 1 – конец времени transition-duration .
  • По оси y – завершённость процесса: 0 – начальное значение анимируемого свойства, 1 – конечное.

Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1) .

График этой «кривой» таков:

…Как видно, это просто прямая. По мере того, как проходит время x , завершённость анимации y равномерно приближается от 0 к 1 .

Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:

Свойство CSS transition

Автор: Ярослав Перелыгин / Дата: 20/11/2012

Блог Ярослава Перелыгина

CSS3 дарит нам новые красивости и приятности. В некоторых случаях для создания какого-либо необычного эффекта больше не нужно прибегать к использованию flash и javascript. Свойство CSS transition является ярким примером одной из таких ситуаций. Думаю, всем известен псевдокласс :hover. При помощи него меняются значения CSS свойств элемента при наведении на него мышкой. К примеру, был блок серого цвета с черной надписью, навел на него мышкой, и он стал черным с белой надписью.

Вот, как это прописывается:

А вот, как это выглядит:

Можно также сделать, чтобы блок при наведении на него, помимо цвета фона и цвета текста, менял также и ширину. Для этого запишем CSS код так:

Вот, как это будет выглядеть в данном случае:

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

О свойстве transition

Свойство transition придает переходу от одних стилей к другим плавность. К примеру, цвет блока при наведении на него мышкой изменится не резко, а в течение определенного времени. Transition, кстати, в переводе на русский означает «переход». Свойство имеет следующую запись:

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

В примерах был указан короткий вариант записи, подробный имеет следующий вид:

В transition-property задается свойство, на которое будет распространяться действие перехода. К примеру: color, background-color, width, height, left, opacity, visibility и многие другие. Можно указать несколько свойств через запятую. Если вы хотите применить переход сразу для всех возможных свойств, тогда у transition-property следует указать значение all. В transition-duration указывается время, в течение которого будет осуществляться переход, в transition-delay время, через которое переход начнется. В transition-timing-function указывается тип перехода, на этом свойстве остановимся подробнее.

Подробнее о transition-timing-function

Свойство transition-timing-function определяет, как будут изменяться промежуточные значения в течение перехода, другими словами, как будет меняться скорость перехода в течение времени, которое задано в свойстве transition-duration. К примеру, переход может начаться быстро, но под конец замедлиться, или же не менять своей скорости в течение всего времени. Transition-timing-function может иметь следующие значения:

  • linear — скорость перехода не меняется от начала и до конца. Эквивалентна cubic-bezier(0,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).
  • cubic-bezier(n,n,n,n) — позволяет задать собственные значения от 0 до 1.

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

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

Примеры использования свойства transition

Чтобы вам легче было разобраться, как правильно применять свойство transition, приведу несколько примеров. Начну, пожалуй, с самого простого. Помните блок с меняющейся шириной и цветом при наведении на него в самом начале поста? Давайте теперь сделаем тоже самое только с использованием свойства transition.
Пример 1.

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

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

При помощи свойств opacity и margin-left блок движется и исчезает в течение двух секунд.
Пример 3.
Еще один простой пример. На этот раз у текста появляется тень белого цвета, хотя в данном случае она напоминает скорее подсветку, чем тень, но свойство называется именно так.

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

Согласитесь, смотрится неплохо, и сразу даже не догадаешься, что это удалось сделать лишь посредством CSS. В примере, кстати, использовалось еще одно новое свойство transform. Многие браузеры читают его только при помощи вендорных префиксов. Обратите внимание, что их нужно указывать и в значении свойства transition. Обязательно подпишитесь на обновления моего блога, чтобы узнать про свойство transform еще больше. Вскоре ему будет посвящена отдельная статья, как и многим другим свойствам.
Пример 5.
Свойство CSS transition, кстати, неплохо себя показывает и в сочетании с псевдоклассом :active. Блок в данном примере должен будет увеличиваться при нажатии и удержании на нем курсора мыши. Проверим?

Для реализации этого примера нужно было всего лишь увеличить значения ширины и высоты в блоке с псевдоклассом :active.

Способов использования свойства CSS transition на самом деле очень и очень много, уверен, в будущем их станет еще больше. Я привел лишь самые простые примеры, чтобы продемонстрировать transition в действии. Ссылки, кстати, на моем блоге меняют свой цвет при наведении на них мышкой именно при помощи него. Думаю, я вам порядком надоел серым прямоугольником, но зато на нем удалось отлично показать все, что я хотел. В сочетании с другими свойствами и графикой transition может вытворять очень красивые вещи. Пробуйте!

Илон Маск рекомендует:  Процедуры в Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL