滚动页面时如何在纯 CSS 中为部分设置动画？

Question

我正在寻找一种在用户滚动页面时为某些元素设置动画的方法（使用@keyframes, transform...）。例如：

• 当 offset 为 0 时：divhas height: 100px。
• 当偏移量介于 0 和 100 之间时：div是height: 50px和color: blue。
• 等等...

可以使用纯 CSS 吗？如果不是，那么使用 HTML 或 Javascript 最有效的方法是什么？

Answer 1

根据滚动位置为元素的样式属性设置动画的最有效方法可能是添加一个具有滚动功能的类：

工作示例

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y > 500) {
    // myID.style.backgroundColor = "blue"; // you can add individual styles 
    myID.className = "blue" // or add classes
  } else {
    // myID.style.backgroundColor = "red";
    myID.className = "red"
  }
};

window.addEventListener("scroll", myScrollFunc);

body {
  height: 1100px;
}
#myID {
  position: fixed;
  height: 100px;
  line-height: 20px;
  transition: all 1s;
}
.blue {
  background: blue;
  animation: myAnimation 1s both;
}
.red {
  background: red;
}
@keyframes myAnimation {
  0% {
    border-radius: 0px;
    line-height: 10px;
  }
  100% {
    border-radius: 100%;
    line-height: 100px;
  }
}

<div id="myID" class="red">Hello world</div>

文档：

.scrollY
.className
阅读进度