The movement of the background with css?

Good day, have a regular block height of 1000 pixels and 100% width, a background is the picture. Please tell me how to make so that when opening the website after 2 seconds the background shifted along the x axis by 50% and stopped ?
Here is the example code everything works but it looped and repeated and you need to when reached 100% stopped (( sounds like a mistake (
<!DOCTYPE html>
<html>

the <head>
 <meta charset="utf-8">
<title>Background</title>
<style>
 body {
 background: url(images/logo.png) repeat-x 0 100% fixed,
 linear-gradient(to top, #5080b1, #004e8c) fixed;
 animation: grow 3s infinite linear;
 -webkit-animation: grow 3s infinite linear;
 background-size: cover;
}

 @-webkit-keyframes grow {
 0% {
 background-position: -100px 100%, 0 0;
}

 100% {
 background-position: 0 100%, 0 0;
}
}

 main {
 width: 80%;
 min-height: 800px;
 display: block;
 margin: auto;
 background: rgba(255, 255, 255, 0.6);
 padding: 20px;
}
</style>
</head>

the <body>
<main>blah Blah</main>
</body>

</html>
March 19th 20 at 08:55
1 answer
March 19th 20 at 08:57
Solution
animation: grow 3s linear forwards;

You used a value of infinite properties animation-fill-mode. It is not surprising that the animation constantly repeated.

The value of the forwards will fix the animation in its latest condition. Without endless iterations.

Find more questions by tags HTMLCSS