// 在scss中定义mixin

@mixin createClipPathKeyframes($animation-name, $line: 1) {
    @keyframes #{$animation-name} {
        0% {
        visibility: visible;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0, 0 #{100% / $line}, 0 #{100% / $line});
        }
        @for $i from 1 through $line - 1 {
        $percent: 100% / $line * $i;
        $next: 100% / $line * ($i + 1);
        $prev: 100% / $line * ($i - 1);
        #{$percent} {
            visibility: visible;
            clip-path: polygon(0 0, 100% 0, 100% #{$prev}, 100% #{$prev}, 100% #{$percent}, 0 #{$percent});
        }
        #{$percent + 0.01} {
            visibility: visible;
            clip-path: polygon(0 0, 100% 0, 100% #{$percent}, 0 #{$percent}, 0 #{$next}, 0 #{$next});
        }
        }
        $prevLast: 100% / $line * ($line - 1);
        100% {
        visibility: visible;
        clip-path: polygon(0 0, 100% 0, 100% #{$prevLast}, 100% #{$prevLast}, 100% 100%, 0 100%);
        }
    }
}


// 在scss使用。会生成 @keyframes clip-right{ }

@include createClipPathKeyframes(clip-right, 2);

// 如若想在css中使用。自己想办法。。。