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

Question

当用户滚动页面时，我正在寻找一种方法来动画（使用@keyframes ， transform ...）一些元素。 例如：

• 当offset为0时： div 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
。班级名称
阅读进度

Answer 2

Methinnks不可能用纯粹的css'间谍'滚动。 如果你愿意，你可以用jQuery做到这一点：

$(document).scroll(function() {
    var pos = parseInt($(document).scrollTop())

    if(pos == 0) {
        $('.yourDivClass').css({
            height : '100px' , 
            color : '#fff'
        })
    }

    if (pos > 0 && pos <= 100) {
        $('.yourDivClass').css({
            height : '50px' , 
            color : 'blue'
        })
    }   

    console.log(pos)
})  

当然，如果你想获得平滑过渡，你应该在你的css文件中声明转换

.yourDivClass {
    transition: height 0.5s ease
}

Answer 3

您可以使用Waypoints.js来设置到达页面的特定元素时发生的情况。

Answer 4

滚动是一个事件。 滚动页面后，事件会被触发并发生某些事情。 您无法使用Pure CSS控制事件。 期。

有些人甚至认为:hover是一个事件。 是的，这是出于一些奇怪的原因，在CSS中实现，而不是其他。

Answer 5

使用纯CSS：没有。

但是你可以拥有一个与它关联的关键帧动画的类，然后说当元素滚动到视图中时 ，将类添加到元素中。 这将使它开始做动画。