@Karmov69

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

Есть блок у которого фон картинка, он спрятан за край экрана своиством 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/
  • Вопрос задан
  • 243 просмотра
Пригласить эксперта
Ответы на вопрос 3
alsolovyev
@alsolovyev
Сейчас бы почитать основы html, потоки... Да, и так сойдет.
Используйте transform вместо right.
И уберите animation. Transition вполне хватит для такой анимации.
Ответ написан
Krasnodar_etc
@Krasnodar_etc
little front
Или transition: rigth или, что лучше, двигайте не right (ибо это очень "тяжёлое" свойство), а transform: translateX . И применяйте к нему transition
Ответ написан
@Karmov69 Автор вопроса
всё пробовал, не меняется. дерганно выезжает.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
21 сент. 2018, в 18:08
200 руб./за проект
21 сент. 2018, в 17:53
25000 руб./в месяц
21 сент. 2018, в 17:41
1000 руб./за проект