Фоновое увеличение анимации

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

Я создал образец ссылки в 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 */
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
1 226
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам не хватает простого свойства: animation-fill-mode: forwards

Вот ваш код с добавленным свойством, вы увидите, что он отлично работает

https://codepen.io/manAbl/pen/vjbgYK

Дальнейшее чтение:

https://devdocs.io/css/animation-fill-mode

В краевом изображении браузера что-то мерцает (прыгает) любая идея, как решить эту проблему, теперь только я заметил в краевом браузере Спасибо

dhana 13.07.2018 12:36

Другие вопросы по теме