Почему картинка выезжает не плавно?

Question

[Socrates]

Есть блок у которого фон картинка, он спрятан за край экрана своиством right:-100%;
При загрзке страницы с помощью css-анимаций он выезжает.
Всё бы хорошо, но выезжает не плавно.
Прикрепляю css и ссылку где можно глянуть, как работает щас.

.block-bg {
height: 100vh;
top: 0;
position: absolute;
width: 100%;
right: -100%;
animation-direction: normal;
background: url('/wp-content/themes/bauhaus/images/bg/hp_bg.jpg') no-repeat center center;
background-size: cover;
-webkit-animation-name: move;
-webkit-animation-duration: 0.9s;
-webkit-animation-delay: 0.5s;
-webkit-animation-fill-mode: forwards;
animation-name: move;
animation-duration: 0.9s; /* Продолжительность анимации */
animation-delay: 0.5s; /* Задержка */
animation-fill-mode: forwards;
}

@keyframes move {
from { right: -100%; }
to { right: 0%;}
}

Ссылка: https://betonbasis.ru/test/

Answer 1

[Aleksey Solovyev]

Сейчас бы почитать основы html, потоки... Да, и так сойдет.
Используйте transform вместо right.
И уберите animation. Transition вполне хватит для такой анимации.

Comments

[Socrates]

Я пробовал и так.
А что с потоками ?
Самым первым пробовал transition выезжает, но опять же не плавно.

[Socrates]

https://codepen.io/Lynxloner/pen/eeBEmK
Научите

Answer 2

[Егор Живагин]

Или transition: rigth или, что лучше, двигайте не right (ибо это очень "тяжёлое" свойство), а transform: translateX . И применяйте к нему transition