CSS background-position 0.1s линейный;

Question

Что означает линейный атрибут в CSS?

 background-position 0.1s linear;

Я смотрю на этот код и не знаком с линейным атрибутом. Как это меняет градиент кнопки?

.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -ms-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}

Answer 1

Слово " линейный" обозначает функцию замедления, используемую в вашем css-переходе - это формально известно как "функция времени перехода". В этом случае linear сообщает css, что этот элемент будет поддерживать одинаковую скорость на протяжении всей анимации этого Перехода.

Когда мы указываем функцию переходного времени, мы определяем график кривой, который представляет скорость всей анимации.

Взгляните на документацию по MDN здесь - вы можете увидеть список других опций

Чтобы получить другие интересные анимационные эффекты, вы можете попробовать "замедление" или "замедление", которые представляют анимацию, которая начинается медленнее и ускоряется или запускается быстро и замедляется.

С помощью cubic-bezier(start, mid1, mid2, end) Вы даже можете определить свое собственное смягчение, если вы так склонны. Четыре значения представляют скорость в начале MidPoint1 MidPoint2 и в конце анимации.