Почему css анимация получается не линейной?

Question

[Сергей Горячев]

Решил тут помочь человеку Как реализовать такую анимацию фона на сайте?
Правда потом увидел, что там требования другие и мое решение не подходит)

Написал простую анимацию https://jsfiddle.net/webirus/v8qmvesa/

.header {
    animation-name: sky;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    transition-timing-function: linear;
}
@keyframes sky {
  0% {
      background-position: 0px 200px;
  }
  100% {
    background-position: 0px 0px;
  }
}

И понял, что она как-то не так работает.

А собственно, что с ней? Почему линейная анимация замедляется в конце?
Не пойму, где косяк допустил и почему так работает.

Answer 1

[Сергей delphinpro]

Потому что animation и transition - немного разные вещи :)

https://jsfiddle.net/v8qmvesa/2/

Comments

[Сергей Горячев]

Вот же блин) Спасибо)

Answer 2

[Алексей Струков]

animation: sky 20s linear infinite;

Надо просто порядок свойств указывать в определенном порядке )

PS

Сначала не заметил что вместо animation-timing-function написано transition-timing-function
В этом и есть причина. Порядок указания свойств не имеет значения в данном случае.

Comments

[Сергей Горячев]

Порядок не важен, а вот свойство перепутал)

[Сергей Горячев]

Но ваш способ (написать в одну строку) тоже работает) Как раз исключает мой косяк)