Working with backgrounds can be a bit challenging, especially when it comes to animating the position. Specific sizes are required for a seamless effect. I have provided a comprehensive explanation in my answer (Using percentage values with background-position on a linear-gradient) outlining the reasoning behind the values used:
@keyframes animatedBanner {
from {
background-position: 50% 200%;
}
to {
background-position: 50% 50%;
}
}
.page-hero {
background-image: url(https://picsum.photos/id/1068/800/400);
background-repeat: no-repeat;
padding:100px 0;
text-align: center;
animation: 2s ease-out animatedBanner both .5s;
background-size: auto 200%;
}
<div class="page-hero">
<div class="inside-page-hero grid-container grid-parent">
<h2>this is an image</h2>
</div>
</div>
To achieve the opposite direction
@keyframes animatedBanner {
from {
background-position: 50% -100%;
}
to {
background-position: 50% 50%;
}
}
.page-hero {
background-image: url(https://picsum.photos/id/1068/800/400);
background-repeat: no-repeat;
padding:100px 0;
text-align: center;
animation: 2s ease-out animatedBanner both .5s;
background-size: auto 200%;
}
<div class="page-hero">
<div class="inside-page-hero grid-container grid-parent">
<h2>this is an image</h2>
</div>
</div>
If you prefer to avoid using background-position and background-size, consider utilizing pseudo-elements
@keyframes animatedBanner {
from {
transform: translateY(100%); /* or -100% */
}
}
.page-hero {
padding: 100px 0;
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
}
.page-hero:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: url(https://picsum.photos/id/1068/800/400) center/cover;
animation: 2s ease-out animatedBanner both .5s;
}
<div class="page-hero">
<div class="inside-page-hero grid-container grid-parent">
<h2>this is an image</h2>
</div>
</div>