1 Topic by Xakker

Topic: CSS плавно меняющийся фон background

Сделать плавно меняющийся фон для background в CSS довольно просто.
Давайте начнем с самого простого примера — добавим плавный переход фона ссылки.
Классическая реализация:

a.foo {
  padding: 5px 10px;
  background: #69f;
  color: #000;
  }
a.foo:hover {
  background: #33f;
  color: #fff;
  }

При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый. Обычная ситуация.
Теперь добавим плавную смену фона, используя CSS transitions:

a.foo {
  padding: 5px 10px;
  background: #69f;
  color: #000;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  }
a.foo:hover {
  background: #33f;
  color: #fff;
  }

Теперь наш фон плавно меняет цвет в течение полусекунды! Как и с прочими свойствами CSS, мы можем объединить все transition-свойства в одно:

a.foo {
  padding: 5px 10px;
  background: #69f;
  color: #000;
  -webkit-transition: background 0.5s ease;
  }
a.foo:hover {
  background: #33f;
  color: #fff;
  }

Xakker's Website

2 Reply by Xakker

Re: CSS плавно меняющийся фон background

Теперь добавим плавное изменение цвета шрифта:

a.foo {
  padding: 5px 10px;
  background: #69f;
  color: #000;
  -webkit-transition: background 0.5s ease, color 0.3s ease;
  }
a.foo:hover {
  background: #33f;
  color: #fff;
  }

Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 0.3 секунд. Если же нам нужны одинаковые свойства для всех элементов, мы можем заменить
-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

на
-webkit-transition: all 0.5s ease;

Теперь Transition-эффект будет применяться ко всем изменяющимся при событии свойстам и с одинаковыми параметрами — 0.5 секунд, ease-эффект.

Так же, мы можем добавить задержку для эффекта:

a.foo {
  padding: 5px 10px;
  background: #69f;
  color: #000;
  -webkit-transition: all 0.5s ease;
  -webkit-transition-delay: 0.5s;
  }
a.foo:hover {
  background: #33f;
  color: #fff;
  }

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

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active. Вообще — использовать transition можно с любыми селекторами.

Xakker's Website