Всем здравия! В этом материале разберём, как делать плавные переходы на CSS3 , используя свойство transition .

Плавные переходы в CSS3.

Всем здравия! В этом материале разберём, как делать плавные переходы на CSS3, используя свойство transition.

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

transition-property: background;
transition-duration: 2s;
transition-delay: 1s;
transition-timing-function: ease;

В transition-property мы должны указать, что именно мы хотим анимировать. Например, background. Если вы хотите анимировать сразу все свойства css, то задайте значение all.

transition-duration задаёт время, которое будет длиться анимация. В нашем случае 2 секунды.

transition-delay задаёт задержку перед анимацией. Т.е. анимация произойдёт не сразу, а лишь спустя 1 секунду в нашем случае.

Теперь поговорим о transition-timing-function. Он может иметь несколько значений:

  • linear - эффект, при котором анимация будет длиться с одинаковой скоростью
  • ease - эффект, при котором анимация начнётся медленно, затем ускорится, а в конце снова замедлится
  • ease-in - эффект с замедленным началом
  • ease-out - эффект с замедленным концом
  • ease-in-out - эффект с замедленным началом и концом
  • cubic-bezier(n,n,n,n) - тут можно указать какие-нибудь свои значения от 0 до 1

Чтобы не рассписывать всё так длинно, есть сокращённая форма

transition: background 2s ease 1s;

Думаю, тут всё понятно. Сначала указываем, что мы анимируем, потом сколько времени будет длиться анимация, какой эффект применять и задержка перед анимацией(её может и не быть).

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

HTML разметка <html>
<head>
  <title>transition</title>
  <meta charset="utf-8">
</head>
<body>
  <div class="block">Кнопка клац!</div>
</body>
</html>

Теперь зададим ему стили, а затем я поясню

.block {
  width: 110px;
  padding: 15px 3px;
  background: #ccc;
  color: #fff;
  text-align: center;
  border-radius: 7px;
  font: 17px "Tahoma";
}

Вот, что у нас получилось:

блок

Теперь зададим стили при наведении

.block:hover {
  background: #fafafa;
  color: #ccc;
  box-shadow: 1px 3px 5px #ccc;
}

блок при наведении

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

.block: hover {
  /* ... стили */
  transition: all .5s ease-in-out;
}

Теперь при наведении стили будут меняться плавно, но когда вы отведёте мышку, то стили вернутся на первоначальные значения резко. Чтобы это исправить, добавим transition также к нашему блоку.

.block {   /* ... стили */   transition: all .5s ease-in-out; }

На этом всё для этой статьи. Обязательно попробуйте придумать себе какой-нибудь пример и сделать его, чтобы закрепить знания, которые вы получили сейчас. Удачи!