transition в CSS


Содержание

transition

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

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

Описание

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

Свойство transition объявляется вместе с остальными стилями элемента. При каждом изменении значения свойства, указанного в качестве целевого, изменения будут происходить постепенно. Чаще всего transition применяется для плавного изменения вида элемента при наведении на него курсора, но также его можно применять совместно с JavaScript (например, если вид элемента был изменён путём добавления класса или иным образом).

Примечание: CSS свойство transition позволяет в одном объявлении устанавливать значения таких свойств, как transition-property, transition-duration, transition-timing-function, и transition-delay. Не забывайте всегда указывать значение для свойства transition-duration, так как, если не указать значение, то продолжительность перехода будет равна нулю и никакого эффекта не будет.

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

Синтаксис

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

Значение Описание
transition-property Указывает CSS-свойство, для которого будет применён эффект перехода.
transition-duration Указывает, продолжительность эффекта перехода в секундах(s) или миллисекундах(ms).
transition-timing-function Задаёт кривую скорости для эффекта перехода.
transition-delay Указывает, когда начнётся эффект перехода.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

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

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

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

Псевдокласс :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 ? Если Вам не трудно и это подсказать) Такие эффекты я в ЦСС не использовал так широко, трудно еще по началу без хороших советов, но разобраться необходимо.

Свойство transition

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

На данный момент в спецификации CSS3, определены следующие свойства, изменения для который, могуть быть анимированны:

Свойство Тип значения
background-color
background-image only gradients
background-position ,
border-bottom-color
border-bottom-width
border-color
border-left-color
border-left-width
border-right-color
border-right-width
border-spacing
border-top-color
border-top-width
border-width
bottom ,
color
crop rectangle
font-size ,
font-weight
grid-* various
height ,
left ,
letter-spacing
line-height , ,
margin-bottom
margin-left
margin-right
margin-top
max-height ,
max-width ,
min-height ,
min-width ,
opacity
outline-color color
outline-offset integer
outline-width
padding-bottom
padding-left
padding-right
padding-top
right ,
text-indent ,
text-shadow shadow
top ,
vertical-align keywords, ,
visibility visibility
width ,
word-spacing ,
z-index integer
zoom

Свойство transition определено в спецификации CSS 3 модуль Transitions (анимационные переходы), применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, На данный момент свойство поддерживается во всех основных браузерах.

CSS Transitions

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

Mouse over the element below to see a CSS transition effect:

In this chapter you will learn about the following properties:

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

Browser Support for Transitions

The numbers in the table specify the first browser version that fully supports the property.

Property
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Browser Specific Prefixes

Some older browsers need specific prefixes (-webkit-) to understand the transition properties:

Example

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

The following example shows a 100px * 100px red

Example

The transition effect will start when the specified CSS property (width) changes value.

Now, let us specify a new value for the width property when a user mouses over the

Example

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.

Change Several Property Values

The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

Example

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

  • ease — specifies a transition effect with a slow start, then fast, then end slowly (this is default)
  • linear — specifies a transition effect with the same speed from start to end
  • ease-in — specifies a transition effect with a slow start
  • ease-out — specifies a transition effect with a slow end
  • ease-in-out — specifies a transition effect with a slow start and end
  • cubic-bezier(n,n,n,n) — lets you define your own values in a cubic-bezier function


The following example shows the some of the different speed curves that can be used:

Example

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.

The following example has a 1 second delay before starting:

Example

Transition + Transformation

The following example adds a transition effect to the transformation:

Example

More Transition Examples

The CSS transition properties can be specified one by one, like this:

Example

or by using the shorthand property transition :

CSS3 transition: плавные переходы

Переходы в CSS — это именно то, что помогает «вдохнуть жизнь» в неподвижную и скучную веб-страницу и анимировать ее. Смена одних CSS-стилей другими через заданный промежуток времени и с определенной скоростью — это и есть задача свойства transition .

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

Рекомендуем взглянуть на примеры CSS-переходов в нашей отдельной статье.

Как создать переход transition

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

С какими стилями срабатывает transition

Во-первых, анимированию поддаются все трансформации ( scale() , rotate() , skew() и т. д.). Во-вторых, можно создавать переходы между значениями таких свойств, как color , background , width , height , opacity и т. д. Весь перечень можно посмотреть на сайте W3.org.

Кроссбраузерность

Свойство transition понимают следующие версии браузеров:

  • IE 10+;
  • Edge 12+;
  • Firefox 5–15 (с префиксом -moz- ), Firefox 16+ (без префикса);
  • Chrome 4–25 (с префиксом -webkit- ), Chrome 26+ (без префикса);
  • Safari 5.1–6 (с префиксом -webkit- ), Safari 6.1+ (без префикса);
  • Opera 12.1+.

Мобильные браузеры также хорошо поддерживают данное свойство (оно не работает лишь в Opera Mini). Ранние версии таких мобильных браузеров, как iOS Safari и Android Browser, распознают свойство transition при указании префикса -webkit- .

Для наилучшего обеспечения кроссбраузерности рекомендуется добавлять вендорные префиксы при использовании свойства transition.

Из каких свойств состоит transition

Свойство transition является универсальным: в нем можно записать значения для четырех отдельных свойств сразу. Эти свойства мы будем рассматривать по отдельности. Вот их список:

  • transition-property — указывает, для какого стиля будет действовать переход;
  • transition-duration — определяет длительность анимации;
  • transition-timing-function — скорость хода анимации;
  • transition-delay — время ожидания перед началом перехода.

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

Свойство 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 может вытворять очень красивые вещи. Пробуйте!

transition

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

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

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

Синтаксис ?

Обозначения


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

×

Значения

Пример

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

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

Примечание

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

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

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

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

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

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

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

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

×

Браузеры ?

10 12 1 26 11.6 12.10 3 6.1 4 16
2.1 4.4 4 16 10 12.10 3.2

Браузеры

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

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

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

Свойство transition в CSS3

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

Как видно из примера наша ссылка меняет фон при наведении курсора мышки в течении полсекунды. Код получился громоздкий и неудобный, но как и все свойства в CSS в одно transition:

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

Также можно использовать свойство transition-delay, которое предназначено для задержки перехода. Как его использовать я писать не буду, вы думаю и сами уже догадались. Если нет то попробуйте его применить, дам лишь подсказку что время задержки выставляется также, как и в свойстве transition-duration.
Вот пожалуй пока и всё, что нужно для первого раза!

Все права на сайт принадлежат Александру Побединскому.

Копирование любых материалов сайта возможно только с разрешения автора или при указании ссылки на источник.

WebComplex – самостоятельное создание сайтов

Все о самостоятельном создании сайта

CSS3 как использовать свойство transition?

В этой статье мы разберем, как использовать свойство CSS3 – transition.

Свойство transition дает нам возможность контролировать параметры эффекта перехода.

Как работает свойство transition?

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

Эффект перехода поддерживается не во всех браузерах.

Interne Explorer: не поддерживает.

Firefox: -moz-transition.

Safari и Chrome: -webkit-transition.

Opera: -o-transition.

По-этому CSS3 код будет следующий.

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

Именно для блока с псевдо-классом :hover (:focus) надо описать свойства которые примет наш блок (элемент) после окончания эффекта перехода.

Добавим же эти стили:

Результат

Определения и использование

У эффекта перехода есть четыре свойства:

transition-property, transition-duration, transition-timing-function и transition-delay.

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

Значения по-умолчанию: all 0 ease 0
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: object.style.transition=”width 2s”

Синтаксис

Значение Описание
transition-property определяет название(-я) CSS свойств(-а) для которого (-ых) применяется эффект перехода
transition-duration Продолжительность эффекта в секундах или миллисекундах
transition-timing-function Определяет скорость кривой эффекта перехода
transition-delay Определяет время начала эффекта перехода (задержка перед стартом)

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

1. Transition-property

Давайте в начале посмотрим на синтаксис:

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

Примеры использования transition-property:

2. Transition-duration

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

Примеры использования transition-duration:

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

3. Transition-timing-function

Данное свойство позволяет задать интенсивность выполнения эффекта перехода. Задать временную функцию можно двумя способами: написав название функции или настроить свою временную функцию.

Пример использования transition-timing-function:

В примере ниже покажем поведение всех временных функций

Илон Маск рекомендует:  PHP календарь скрипт календаря для сайта на PHP + HTML + CSS
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL