如何将@keyframes动画仅应用于背景？

Question

I have an advert container using grid and I've applied a @keyframes animation to it and it looks pretty cool! However, I'd like the image itself to move and not the text in the foreground.

At the moment I'm moving the entire container which is obviously what needs to change but I can't figure out where I need to go from here.

 advert { grid-area: advert; background-image: url(./mi-vr-5.jpg); background-position-x: 50%; background-position-y: 50%; background-size: 1000px; } .righttoleft { animation-name: righttoleft; animation-duration: 3s; } @keyframes righttoleft { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } 

 <advert class="righttoleft"> <div class="title-shift"> <h1 class="title">bla bla bla</h1> <h3 class="title-shift-h3">bla bla bla</h3> <p class="title-shift-h3">bla bla bla.</p> </div> </advert> 

Answer 1

You can do it like below, You need to use background position instead of transform translate, and you're done!

 .righttoleft { -moz-animation: righttoleft 3s infinite alternate; -o-animation: righttoleft 3s infinite alternate; -webkit-animation: righttoleft 3s infinite alternate; animation: righttoleft 3s infinite alternate; grid-area: advert; background-image: linear-gradient(to right, red, yellow); background-position: 0% 0%; background-size: 1000px; float: left; width: 100%; } @keyframes righttoleft { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } 

 <advert class="righttoleft"> <div class="title-shift"> <h1 class="title">bla bla bla</h1> <h3 class="title-shift-h3">bla bla bla</h3> <p class="title-shift-h3">bla bla bla.</p> </div> </advert>