Создание динамических эффектов с помощью
CSS3-параметра transition

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

Параметр transition – это важное нововведение в CSS. Его можно использовать для создания динамических эффектов, применяемых к div-элементами или классам при помощи простой структуры:

  transition: параметр продолжительность тайминг задержка;

Transition в CSS3 – это отличный способ добавить небольшую анимацию на сайт без необходимости заполнять его javascript-библиотеками наподобие jQuery.

Демо

Перед тем, как начать, предлагаем вам ознакомиться с демонстрацией параметра transition в действии.

Параметр

Прежде всего, для того чтобы этот параметр работал, нам нужно использовать стандартные параметры. Очевидно, два наиболее часто применяемых параметра – это ширина и высота. Для того чтобы использовать параметр отдельно, вы можете воспользоваться этим:

  transition-property: параметр

Изменение размера

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

Например, здесь мы применили параметр transition к ширине, а затем указали начальное значение ширины, а затем указали конечное значение ширины (которое применяется при наведении на элемент курсора мыши:

#block {
  transition-property: width;
  width: 50px;
}
#block:hover {
  width: 75px;
}

Продолжительность

Теперь, когда мы определили, как будет трансформироваться параметр и начальное/конечное значения, нам нужно определить продолжительности перехода (transition). Это реализуется за счет определения длины в секундах или миллисекундах, как показано ниже:

transition-duration: продолжительность;

Данный пример формирует следующий код:

#block {
  transition-property: width;
  transition-duration: 0.5s;
  width: 500px;
}

#block:hover {
  width: 750px;
}

Это означает, что div block будет расширяться на 250 пикселей за 0.5 секунд.

Функция тайминга

Этого кода достаточно для того, чтобы создать привлекательный эффект, тем не менее, мы можем пойти дальше, и воспользоваться CSS3-параметром transition с применением функции тайминга. При помощи этого параметра у нас будет возможность изменять значения в момент воспроизведения перехода. Параметр transition по умолчанию выставлен на линейную кривую. Тем не менее вы можете выставить функции смягчения, кубическую кривую Безье и многое другое. Кубическая кривая Безье позволяет вам определять ваши собственные значения при помощи (n,n,n,n), где n может быть от 0 до 1 (например, линейная может быть (0,0,1,1)).

Использование этого кода в нашем примере даст нам следующее:

#block {
  transition-property: width;
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
  width: 500px;
}
#block:hover {
  width: 750px;
}

Задержка

Более того, на подобии transition-duration, применение параметра transition-delay поможет нам установить задержку перед началом эффекта:

transition-delay: время;

Завершение

Хотя мы и использовали в примере более описательный и понятный вид, рекомендуем вам использовать сокращенные формы. Выглядит это примерно следующим образом:

#block {
  transition: width ease-in-out 0.5s 0.1s;
  width: 500px;
}

#block:hover {
  width:750px;
}

Источник статьи