Переход / Transition

В основе переходов лежит:

• transition-property какие свойства измененять
• transition-duration сколько времени займут измененения
• transition-timing-function как именно изменения будут зависить от времени
• transition-delay необязательная задержка перед началом изменений

Что нужно описать для создания переходов:

• начальный вид элемента
• конечный вид элемента
• transition property, duration, timing-function, delay
• инициатор :hover, :active, :target, :focus или на основе JavaScript

Краткая запись свойства transition:

• transition: all 1.5s ease-in-out 200ms;

• transition: opacity 800ms 0.2s;

• отдельное описание для каждого свойства:

  transition: opacity 800ms, 
  color 1.2s, 
  height 3s 200ms;                
                

Что можно анимировать.

• transform
  • rotate
  • scale
  • translate
  • skew
• font
  • color
  • font-size
  • letter-spacing
  • word-spacing
  • line-height
  • ...
• box-model
  • width
  • heigh
  • margin
  • padding
• position
  • top
  • left
  • right
  • bottom
• opacity
• полный список

EXAMPLE

анимация подчеркивания ссылки при hover

еще пример

a {
  position: relative;
  text-decoration: none;
}

a::after {
  content: "";
  width: 0;
  border-bottom: 2px solid #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  transition-property: width;
  transition-duration: .4s;
  transition-timing-function: ease-in-out;
}

a:hover::after {
  width: 100%;
}          
        

Подчеркивание в разных направлениях

Пример на основе transform-origin и transform: scale

transition-timing-function

Указывает, как быстро развивается процесс анимации во времени. Описывается кривыми Базье.

• ease default
• ease-in
• ease-out
• ease-in-out
• linear
• cubic-bezier(0.250, 0.250, 0.750, 0.750) linear

Кривые Безье

• Начальная точка (x,y) === (0,0)
• Конечная точка (x, y) === (1,1)
• Для промежуточных точек значения x должны быть в интервале 0..1, y – любым
• Синтаксис кривой Безье в CSS:
  • указываются координаты только двух точек: второй и третьей
  • cubic-bezier(x2, y2, x3, y3)

  Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1)

подробнее

подбор функции on-line