Плавная трансформация | 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.