Уроки CSS

Свойство transition CSS

Из первых уроков вы могли узнать о событие hover: и о том, как применять это свойство к различным элементам. С помощью свойства transition: (переход) можно значительно приукрасить это событие.

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

Плавность (длительность) смены того или иного параметра регулируется количеством секунд записанных в свойстве.

Пример записи:

transition: background-color 2s ease;

2s – это 2 секунды (можно задавать и нецелые значения);

ease - временная функция, используемая для анимации (помимо это существуют - linear, ease-in-out, ease-in, ease-out, cubic-bezier)

В коде примеров свойство transition: будет записываться три раза с разными префиксами – для трёх браузеров:

-moz- (Firefox 4);
-webkit- (Chrome и Safari);
-o- (Опера);
Internet Explorer «не понимает» это свойство.

Для начала сделаем пример, в котором у блока в течении 2 секунд будет плавно менятся цвет фона:

<style>
  #tran_1{
  width: 350px;
  height: 50px; 
  margin: auto;
  border: 1px solid Orange;
  padding: 10px 0 10px;
  text-align: center;
  background-color: #F9FFED;
  color: Black;
  cursor: pointer;
    -moz-transition: background-color 2s ease;
    -o-transition: background-color  2s ease;
    -webkit-transition: background-color 2s ease;
  }
  
  #tran_1:hover {
    background-color: #D0D941;
    color: Blue;
  }
</style>

<div id="tran_1">
Фон полностью изменится через 2 секунды 
</div>

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

В примере, продемонстрированном ниже, создан блок, у которого при наведении курсора мышки меняется сразу: цвет фона и рамки, а так же размер, цвет и шрифт надписи. Каждому из параметров задана разная длительность перехода:

  <style>
  #tran_2 {
  width: 350px;
  height: 50px; 
  margin: auto;
  border: 4px solid Orange;
  padding: 10px 0 10px;
  text-align: center;
  font-size: 14px;
  background-color: #F9FFED;
  color: Black;
  cursor: pointer;
	-moz-transition: border 1s ease, color 1.5s ease, 
	     font 1.5s ease, background-color 2s ease;
    -o-transition: border 1s ease, color 1.5s ease, 
       font 1.5s ease, background-color 2s ease;
    -webkit-transition: border 1s ease, color 1.5s ease,
	         font 1.5s ease, background-color 2s ease;
  }
  
  #tran_2:hover {
    background-color: #D0D941;
    color: Red;
    font: italic 16px COMIC SANS MS;
	border: 4px solid Blue;
  }
</style>

<div id="tran_2">
Фон полностью изменится через 2 секунды 
</div>

Если вы хотите применить свойство «перехода» сразу ко всем параметрам с одинаковой длительностью – то вместо их перечисления можно просто написать "all".

В последнем примере у блока будут изменяться - цвет заднего фона, цвет текста, а так же радиус и тип рамки (с пунктирной на точечную). Помимо этого с помощью свойства transform: блоу будет увеличивать на 20 процентов (1.2).

Код:

    <style>
  #tran_3 {
  width: 380px;
  height: 55px; 
  margin: auto;
  border: 3px solid Orange;
  border-style: dashed;
  border-radius: 6px;
  padding: 10px 0 10px;
  text-align: center;
  background-color: #F9FFED;
  color: Black;
  cursor: pointer;
	-moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
  }
  
  #tran_3:hover {
    background-color: #D0D941;
    color: Red;
	border-style: dotted;
	border-radius: 28px;
	-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2); 
    -o-transform: scale(1.2);
  }
</style>

<div id="tran_3">
У блока меняется размер, рамка, фон и цвет текста.
</div>

Конечно же это свойство можно применять не только к блокам, но и к другим элементам.

◄ Предыдущий урок

Содержание

Следующий урок ►