使用CSS完成滚动动画

主要使用到animation-timeline: view();和animation-range: entry 0% cover 50%;

CSS代码

@keyframes appear {
    from {
        opacity: 0;
        scale: 0.5;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.view {
    column-count: 3;
}

.block {
    animation: appear linear;
    animation-timeline: view(); /* 令元素在出现时开始做动画 */
    animation-range: entry 0% cover 50%; /* 加入cover属性，可确保元素在到达视口的40%时完全完成动画 */
}

当然可以根据不同的需求改变更多样式

@keyframes appear {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

HTML代码

<div class="view">
    <div class="block" style="width: 50px; height: 100px; background-color: red; margin: 30px 0;"></div>
    <div class="block" style="width: 70px; height: 100px; background-color: rgb(127, 167, 82); margin: 30px 0;"></div>
    <div class="block" style="width: 150px; height: 100px; background-color: rgb(184, 82, 82); margin: 30px 0;"></div>
    <div class="block" style="width: 120px; height: 100px; background-color: rgb(67, 122, 173); margin: 30px 0;"></div>
    <div class="block" style="width: 170px; height: 100px; background-color: rgb(136, 255, 0); margin: 30px 0;"></div>
    <div class="block" style="width: 90px; height: 100px; background-color: rgb(212, 0, 255); margin: 30px 0;"></div>
    <div class="block" style="width: 70px; height: 100px; background-color: rgb(229, 255, 0); margin: 30px 0;"></div>
    <div class="block" style="width: 120px; height: 100px; background-color: rgb(0, 238, 255); margin: 30px 0;"></div>
    <div class="block" style="width: 80px; height: 100px; background-color: rgb(255, 0, 234); margin: 30px 0;"></div>
    <div class="block" style="width: 130px; height: 100px; background-color: green; margin: 30px 0;"></div>
    <div class="block" style="width: 200px; height: 100px; background-color: pink; margin: 30px 0;"></div>
    <div class="block" style="width: 110px; height: 100px; background-color: red; margin: 30px 0;"></div>
    <div class="block" style="width: 160px; height: 100px; background-color: purple; margin: 30px 0;"></div>
    <div class="block" style="width: 40px; height: 100px; background-color: grey; margin: 30px 0;"></div>
    <div class="block" style="width: 70px; height: 100px; background-color: skyblue; margin: 30px 0;"></div>
    <div class="block" style="width: 150px; height: 100px; background-color: sandybrown; margin: 30px 0;"></div>
    <div class="block" style="width: 120px; height: 100px; background-color: rebeccapurple; margin: 30px 0;"></div>
    <div class="block" style="width: 70px; height: 100px; background-color: forestgreen; margin: 30px 0;"></div>
    <div class="block" style="width: 210px; height: 100px; background-color: fuchsia; margin: 30px 0;"></div>
    <div class="block" style="width: 110px; height: 100px; background-color: hotpink; margin: 30px 0;"></div>
    <div class="block" style="width: 140px; height: 100px; background-color: yellowgreen; margin: 30px 0;"></div>
    ......
</div>