css巧妙技巧

滚动动画

效果：

css主要属性

@keyframes animationScroll {
    0%{
        opacity: 0;
        transform: scale(0.5);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
animation: animationScroll;
animation-timeline: view(); /* 控制CSS动画进度的时间线 */
animation-range: entry 0 cover 50%; /* 控制css盒子当进入视口的50%时完成动画 */