CSS Background: Linear Gradient - Animation is not functioning as Wished to be

Question

I am facing an issue implementing the animation. The below code snippet is working fine. Currently, the background is animating from left to right only. But I want to reverse the above animation when its cycle ends (reaches the bottom right corner), then the animation should start from there to the left.

I also tried adding a new animation with a 1.5s delay (when the first animation ends) by changing the background position (with javascript), but it didn't work.

I've already read all the possible answers but didn't find a useful one. Can anyone assist with a suggestion/alternative approach or point out what I'm doing wrong? Any help would be greatly appreciated..!

 .user-img { width: 100px; height: 100px; border-radius: 50%; animation: bg-slide 1.5s ease infinite; border: 6px solid rgba(255, 255, 255, 0.12); background: 0 0/300% 300% linear-gradient(-60deg, #eee 40%, #18d26e 50%, #eee 60%); } @keyframes bg-slide { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

 <img src="https://images.unsplash.com/photo-1630208232589-e42b29428b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60" alt="user-image" class="user-img" />

Answer 1

You have to add alternate to your animation setting (for the animation-direction):

 .user-img { width: 100px; height: 100px; border-radius: 50%; animation: bg-slide 1.5s ease infinite alternate; border: 6px solid rgba(255, 255, 255, 0.12); background: 0 0/300% 300% linear-gradient(-60deg, #eee 40%, #18d26e 50%, #eee 60%); } @keyframes bg-slide { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

 <img src="https://images.unsplash.com/photo-1630208232589-e42b29428b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60" alt="user-image" class="user-img" />

Answer 2

Add animation-direction: alternate; in the.user-img class.

 .user-img { width: 100px; height: 100px; border-radius: 50%; animation: bg-slide 1.5s ease infinite; animation-direction: alternate; border: 6px solid rgba(255, 255, 255, 0.12); background: 0 0/300% 300% linear-gradient(-60deg, #eee 40%, #18d26e 50%, #eee 60%); } @keyframes bg-slide { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

 <img src="https://images.unsplash.com/photo-1630208232589-e42b29428b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60" alt="user-image" class="user-img" />