SCSS样式实现序列帧动画

背景：在前端开发的过程中，会有动画效果实现的需求，特别是在大屏开发的时候，实现动画的方式有几种。

方法一：使用UI设计师提供的GIF图，这种适用于实现小动画，如动态icon，loading效果。

方法二：使用video标签，在页面上插入视频，循环播放。优点：开发方便，加载快。缺点：视频带有黑色背景，视觉效果差，视频在循环的时候会有闪屏。

方法三：使用png结合canvas绘制动画。优点：动画流畅。缺点：首次加载的时候需要等所有img都就绪再开始绘制动画，图片大且多的时候，动画开始时候的等待时长较长。

方法四：使用css样式，结合背景图，实现序列帧动画。优点：实现简单。缺点：首次动画轮播存在动画卡顿现象。

@keyframes sphere {
    @for $i from 0 through 200 {
        /*动画从循环200张图片，动画效果从0%-100%，*/
        #{$i/2}% {
            background-image: url('../assets/video/sphere/球_#{1000+$i}.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    }
}
.animation {
    width: 100%;
    height: 500px;
    animation: sphere 10s infinite;
}