CSS 背景：线性渐变 - Animation 未按预期运行

Question

我在实现 animation 时遇到问题。 下面的代码片段工作正常。 目前，背景仅从左到右进行动画处理。 但是我想在循环结束时（到达右下角）反转上面的 animation，然后 animation 应该从那里开始到左边。

我还尝试通过更改背景 position（使用 javascript）添加一个延迟 1.5 秒的新 animation（当第一个 animation 结束时），但它没有用。

我已经阅读了所有可能的答案，但没有找到有用的答案。 任何人都可以提供建议/替代方法或指出我做错了什么吗？ 任何帮助将不胜感激..！

 .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

您必须将alternate添加到您的animation设置（用于动画方向）：

 .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

添加动画方向：交替； 在.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" />