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

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

при наведении мышки
<style>
.blok {
  background: #808991;
  color: #FFF;
  cursor: pointer;
}
.blok:hover {
  background: #D0D941;
  color: #000;
}
</style>

<div class="blok">при наведении мышки</div>

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

плавная смена цвета туда-обратно
<style>
.transition {
  transition: 3s;
}
</style>

<div class="blok transition">плавная смена цвета туда-обратно</div>
плавная смена при наведении на div
<style>
.transition2:hover {
  transition: 3s;
}
</style>

<div class="blok transition2">плавная смена при наведении на div</div>
плавная смена, когда курсор выведен за пределы div
<style>
.transition3:not(:hover) {
  transition: 3s;
}
</style>

<div class="blok transition3">плавная смена, когда курсор выведен за пределы div</div>
сохранение положения :hover
<style>
.transition4 {
  transition: 0s 9999999s;
}
.transition4:hover {
  transition: 3s;
}
</style>

<div class="blok transition4">сохранение положения :hover</div>
Свойство Описание
transition-property свойство [список возможных], на которое распространяется трансформация. При необходимости воздействия на несколько свойств, они перечисляются через запятую.
  • all — все
  • none — никто
all
width, background
width
none
transition-duration время, в течении которого происходит трансформация.
0s
0.5s
1s
5s
transition-delay время, по истечении которого происходит трансформация.
0s
0.5s
1s
5s
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)
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(.1, .9, .9, 1.5)
cubic-bezier(.1, .9, .9, .1)
cubic-bezier(.1, .9, .9, -1.5)
cubic-bezier(.1, -1.5, .1, 2.5)
step-start
step-end
steps(4, end)
steps(4)
steps(4, start)

плавная смена цвета CSS
<style>
.transition1 {
  transition: background-color 3s cubic-bezier(0.1, 0.8, 0.5, 2), color 3s 1s linear;

  /* или */ 

  transition-property: background-color, color;
  transition-duration: 3s;
  transition-delay: 0s, 1s;
  transition-timing-function: cubic-bezier(0.1, 0.8, 0.5, 2), linear;
}
</style>

<div class="blok transition1">плавная смена цвета CSS</div>

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

изменение ширины width


<div class="transition-width">изменение ширины width</div>
изменение прозрачности opacity


<div class="transition-opacity">изменение прозрачности opacity</div>
кручение CSS


<div class="transition-rotate">кручение transform: rotate(360deg);</div>
увеличивавшие объекта CSS


<div class="transition-scale">увеличивавшие объекта в два раза transform: scale(2);</div>
смещение вниз CSS


<div class="transition-translate">смещение вниз position: relative;</div>

<style>
  div.blok6 {
    cursor: pointer;
    position: relative;
    text-align: center;
  }
  div.blok6:before {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 0 10px #A0A9B1 inset;
    content: attr(data-title);
    font-family: Tahoma;
    font-size: 32px;
    height: 48px;
    line-height: 48px;
    opacity: 0;
    padding: 0 10px;
    position: absolute;
    right: 50px;
    top: 20px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }
  div.blok6:hover:before {
    right: 160px;
    opacity: 1;
    top: 140px;
  }
  div.blok6 img {
    width: 400px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }
  div.blok6:hover img {
    width: 500px;
  }
  div.blok6:after {
    content: attr(data-zagolovok);
    display: block;
    font-weight: bold;
    font-family: Helvetica;
    font-size: 20px;
    text-align: center;
  }
</style>
<div class="blok6" data-title="всплывающий текст" data-zagolovok="подпись под изображением">
<img src="адрес_изображения" /></div>


В статье использованы материалы developer.mozilla.org, vagabundia.blogspot.com.
в f t
наверх ↑

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

совесть
http://myrussiammm.blogspot.com/

Наташа, спасибо.
Применил кручение на картинки.
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. :)
Космо Мизраил Горыныч
да, вижу >_< ток если увести мышь, снеговики не будут плавно возвращать свой размер.


Аааааа, я понял, где мы лоханулись!!!!
Вот смотрите тут:

div.blok6:hover img {
width: 500px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

Все транзишн нужно перенести в

div.blok6 img {
width: 400px;
}

Тогда они не будут контузиться :)
Космо Мизраил Горыныч
Чёт я вас почитываю-почитываю, и мне приспичило вдруг создать свой блог!))))
Ссылко внизу будет :)
Тематика почти такая же, может быть, найдём друг у друга что-нибудь интересное ;)
Мож потом баннерами обменяемся?)
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. Но сомневаюсь, браузеры используют префикс.

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

document.write("<style type='text/css'>
");
document.write(".element {} ");
document.write("</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
Высота блока не должна быть указана в процентах. Пример:

<style>
.transition-height {
background: #808991;
height: 30px;
transition: 3s linear;
}
.transition-height:hover {
height: 150px;
}
</style>

<div class="transition-height">увеличение высоты</div>

Частично решает проблему 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;}

@keyframes uptocall {
0% { background: #2fdbfa; }
50% { background: #2fcae6; }
75% { background: #2fa8bd; }
100% { background: #2fcae6; }
}


Вторая:

#uptocall {
border-radius: 50%;
width:110px;
height:110px;
animation: uptocall 1.5s linear infinite;}

@keyframes uptocall {
0% {box-shadow: 0 0 8px 6px rgba(23,167,167, 0), 0 0 0px 0px rgba(0,0,0,0), 0 0 0px 0px rgba(23,167,167, 0);}
10% {box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px #1affb3;}
100% {box-shadow: 0 0 8px 6px rgba(23,167,167, 0), 0 0 0px 40px rgba(0,0,0,0), 0 0 0px 40px rgba(23,167,167, 0);}
}
Анонимный
Для всего этого можно поставить обычный ДИВ в боди с ай ди uptocall, он почему то не опубликовался
NMitra
Анимацию перечислите через запятую (пример http://jsfiddle.net/NMitra/07Lqsvrk/ )

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

http://jsfiddle.net/NeonRain/jfq6zv2g/
Neon Rain
т е Ваш второй вариант впринципе подходит, одна анимация идет за другой и потом круг повторяется, но нужно что бы первая три раза проиграла и вторая тоже например три раза, у меня пока не получается, не очень хорошо синтаксис знаю, и в интернете тоже что-то не много примеров по работе с двумя и более анимациями
Neon Rain
Вообще моя задача научиться делать такую вот кнопку: https://www.youtube.com/watch?v=pB_GbPciofs&feature=youtu.be

Может посоветуете какие приемы анимации здесь нужны?
NMitra
Нужно время рассчитывать http://jsfiddle.net/NMitra/07Lqsvrk/2/

Это больше похоже на картинку gif или flash
BUTAMUHbI4
Бодрого времени! Всё чётко и понятно. Но мучает один вопрос: можно ли реализовать плавное изменение изображения фона БЕЗ наведения курсора мыши. Если более точно сформулировать задачу, то:
Можно ли реализовать ПЛАВНУЮ смену изображения фона BODY средствами CSS3 без JS?
Благо дарую.
NMitra
Бодрого! С помощью
1) анимации (см комментарий 85)
2) background-attachment: fixed; (при прокрутки, см. http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html#attachment )
Анонимный
Класс!
Спасибо вам за эту страничку
Устал перевешивать скриптами то что можно сделать на CSS

Kai | www.dogica.com