CSS Анимации Transition

CSS Анимации Transition

CSS Анимации Transition применяются для эффекта анимации при переходах между стилями CSS, без подключения Flash или JavaScript.

Сиснтаксис
transition: свойство длительности функции таймера (опционально) и  задержки (опционально) ;

transition — сокращенное обозначение четырех свойств:

  1. property (свойства). Определяет свойства (разделенные запятыми), которые изменяют свое значение при переходах.
  2. duration (длительность). Определяет число в секундах (s) и миллисекундах (ms ) от начала и конца перехода.
  3. timing-function (тайминг функция). Необязательный параметр. Определяет скорость перехода.
  4. delay (задержка). Необязательный параметр. Определяет количество в секундах (s) и миллисекундах (ms) до начала перехода.

Свойства и продолжительность

Мы начнем с простого примера: переход ( :hover) для <div id="transicion"> цвет фона ( background-color) будет меняться от красного ( #ff0000) до синего ( #0000ff) при переходе ( transition) 3 секунды.

#transicion {
  height: 100px;
  width: 100px;
  background-color: #ff0000;
  -webkit-transition: background-color 3s;
  transition: background-color 3s;
}
#transicion:hover {
  background-color: #0000ff;
}

Для использования более одного свойства при переходе, свойства добавляются через запятую (,).

#property {
  height: 100px;
  width: 100px;
  background-color: #ff0000;
  -webkit-transition: background-color 3s, border-radius 3s;
  transition: background-color 3s, border-radius 3s;
}
#property:hover {
  background-color: #0000ff;
  border-radius: 75px;
}

Мы можем сломать свойство transition c предыдущего примера, используя свойства transition-property с transition-duration.

#disaggregated {
  height: 100px;
  width: 100px;
  background-color: #ff0000;
  -webkit-transition-property: background-color, border-radius;
  transition-property: background-color, border-radius;
  -webkit-transition-duration: 3s, 3s;
  transition-duration: 3s, 3s;
}
#disaggregated:hover {
  background-color: #0000ff;
  border-radius: 75px;
}

Timing function

Эта функция задает кривую скоростей на эффект перехода, данный параметр необязателен и может принимать следующие значения:
Timing function
Если не задано, функция таймера по умолчанию — linear.

  • Значение — linear: эффект перехода на одной скорости (эквивалент: кубику Безье (0,0,1,1))
  • Значение — ease: скорость перехода сначала медленная, затем убыстряется, затем снова замедляется (эквивалент: кубику Безье (0.25,0.1,0.25,1))
  • Значение — ease-in: скорость перехода медленная в начале (эквивалент: кубику Безье (0.42,0,1,1))
  • Значение — ease-out: скорость перехода замедляется в конце (эквивалент: кубику Безье (0,0,0.58,1))
  • Значение — ease-in-out: переход происходит медленно на старте и в конце (эквивалент: кубикуБезье (0.42,0,1,1) )

Вот пример.

#timer {
  height: 100px;
  width: 100px;
  background-color: #ff0000;
  -webkit-transition: -webkit-transform 3s ease-out;
  -ms-transition: -ms-transform 3s ease-out;
  transition: transform 3s ease-out;
}
#timer:hover {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

Задержка

Transition-delay добавляет задержку до старта перехода в секундах/миллисекундах (s) или (ms).
В нижеприведенном примере, переход стартует спустя 1 секунду.

#demora {
  height: 100px;
  width: 100px;
  background-color: #ff0000;
  -webkit-transition: background-color 3s, -webkit-transform 3s;
  -ms-transition: background-color 3s, -ms-transform 3s;
  transition: background-color 3s, transform 3s;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
#demora:hover {
  background-color: #0000ff;
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

Это основы CSS Анимации Transition.

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *