Я пытаюсь увеличить анимацию для фонового изображения на определенную секунду. это происходит, но он снова сбрасывается.
Я создал образец ссылки в jsfiddle: https://jsfiddle.net/onlinesolution/tk6rcLdx/
что мне здесь не хватает?
body:before{
content:"";
position:absolute;
top:0px;
left:0px;
height: 100vh;
width: 100%;
background-image: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg");
background-position:center center;
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -9;
-webkit-animation: zoomin 5s ease-in;
animation: zoomin 5s ease-in;
}
/* Zoom in Keyframes */
@-webkit-keyframes zoomin {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
}
@keyframes zoomin {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
} /*End of Zoom in Keyframes */






Вам не хватает простого свойства: animation-fill-mode: forwards
Вот ваш код с добавленным свойством, вы увидите, что он отлично работает
https://codepen.io/manAbl/pen/vjbgYK
Дальнейшее чтение:
https://devdocs.io/css/animation-fill-mode
В краевом изображении браузера что-то мерцает (прыгает) любая идея, как решить эту проблему, теперь только я заметил в краевом браузере Спасибо