Как сделать анимацию более плавной?

Question

[romaro]

Как можно улучшить эту анимацию, чтобы она получилась более плавной? Сейчас она не выглядит бесшовной.

Answer 1

[historydev]

Непонятно какого эффекта вы пытаетесь достичь, но для плавности анимации, она должна начинаться с того, на что заканчивается в бесконечном её варианте:

@keyframes test {   
  from {     
    background: linear-gradient(to right, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.30) 100%, transparent);
  }
  50% {
     background-color: grey;
  }
  to {
     background: linear-gradient(to right, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.30) 100%, transparent);
   }
}

Comments

[ForSureN1]

Насколько мне известно, у градиентов нет свойств для плавного перехода

[historydev]

ForSureN1, достаточно разбить эффект на N секций и на каждой немного менять в нужную сторону

[ForSureN1]

Владимир, а зачем разбивать ее, если можно 1 элемент двигать в нужную сторону

[historydev]

ForSureN1, для примитивов вашего подхода достаточно, для сложных - нет

[ForSureN1]

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

[romaro]

ForSureN1, да, совершенно верно, эффект блика, когда градиент плавно и бесконечно переходить от из одной фазы в другую.

[ForSureN1]

romaro, просто создай before относительно блока этого, ему дай этот background gradient, и при помощи keyframes двигай его с лева направо и для animation задай infinite