页面加载时无法在 div 中显示颜色填充动画

Question

$("#whoami").waypoint(function() {
    console.log('you have scrolled to the h1!');
   });

.d8{
    border: 1px solid black;
    width: 100%;
    height: 2.5rem;
    margin-left: 5rem;
    border-radius: 1rem;
    background: linear-gradient(to right, #e74c3c 85%, #FFF 50%);
}

<div class="d8"></div>

现在我一直在尝试在航路点到达特定部分时在 div 中填充颜色，为用户提供一些不错的动画效果，但我无法实现，已尝试过渡效果和关键帧 none 似乎有效，任何帮助将不胜感激。

Answer 1

在你的情况下，你可以动画化 background-size 而不是 background-image (that you cannot animate) 并使 linear-gradient 成为一种颜色，因为白色部分将成为该部分无背景：

.d8 {
  border: 1px solid black;
  width: 80%;
  height: 2.5rem;
  margin-left: 5rem;
  border-radius: 1rem;
  background-image: linear-gradient(to right, #e74c3c, #e74c3c);
  background-size: 80% 100%;
  background-repeat: no-repeat;
  transition: 0.5s;
}

.d8:hover {
  background-size: 100% 100%;
}

<div class="d8"></div>

页面加载时无法在 div 中显示颜色填充动画

Unable to show color fill animation in div when the page loads

html

javascript

css

jquery-waypoints