@keyframes compositor_transition_fade {
    0% {opacity: 0}
    100% {opacity:1}
}

@keyframes compositor_transition_perspective {
    0% {transform: perspective(30vh) rotateY(-90deg);}
    100% {transform: rotateY(0deg);}
}

@keyframes compositor_transition_blur {
    0% {filter: blur(10vh);}
    99% {filter: blur(0px);}
    100% {filter: none;}
}


/* Wipes */
@mixin wipes($name, $angle, $softness){
    @keyframes #{$name} {
        /* FF does not tween this, lets do it for them */
        @for $i from 0 through 99 {
            #{$i * 1%} {
                $start: max(0%, $i*1% + (($i - 100%)/100%)*$softness);
                $end: min(100%,$i*1% + (($i - 100%)/100%)*$softness + $softness);
                mask: linear-gradient($angle, white 0, white $start, transparent $end, transparent 100%);
            }
        }
        100% {mask: none;}
    }
}
@include wipes(compositor_transition_wipe_up, 0deg, 15%);
@include wipes(compositor_transition_wipe_right, 90deg, 15%);
@include wipes(compositor_transition_wipe_down, 180deg, 15%);
@include wipes(compositor_transition_wipe_left, 270deg, 15%);
@include wipes(compositor_transition_wipe_hard_up, 0deg, 0%);
@include wipes(compositor_transition_wipe_hard_right, 90deg, 0%);
@include wipes(compositor_transition_wipe_hard_down, 180deg, 0%);
@include wipes(compositor_transition_wipe_hard_left, 270deg, 0%);


/* Barndoor wipes */
@mixin barndoors($name, $angle, $softness){
    /* FF does not tween this, lets do it for them */
    @keyframes #{$name+"_out"} {
        @for $i from 0 through 99 {
            #{$i * 1%} {
                $start: max(0%, $i*1% + (($i - 100%)/100%)*$softness*2)/2;
                $end:min(100%,$i*1% + (($i - 100%)/100%)*$softness*2 + $softness*2)/2;
                opacity: 1;
                mask: linear-gradient($angle, transparent 0, transparent #{50% - $end}, white 50%-$start, white 50%, white #{50% + $start}, transparent #{50% + $end}, transparent 100%);
            }
        }
        100% {mask: none;}
    }
    @keyframes #{$name+"_in"} {
        @for $i from 1 through 100 {
            #{(100-$i) * 1%} {
                $start: max(0%, $i*1% + (($i - 100%)/100%)*$softness*2)/2;
                $end:min(100%,$i*1% + (($i - 100%)/100%)*$softness*2 + $softness*2)/2;
                mask: linear-gradient($angle, white 0, white #{50% - $end}, transparent 50%-$start, transparent 50%, transparent #{50% + $start}, white #{50% + $end}, white 100%);
            }
        }
        100% {mask: none;}
    }
}
@include barndoors(compositor_transition_barndoor_vertical, 0deg, 15%);
@include barndoors(compositor_transition_barndoor_horizontal, 90deg, 15%);
@include barndoors(compositor_transition_barndoor_vertical_hard, 0deg, 0%);
@include barndoors(compositor_transition_barndoor_horizontal_hard, 90deg, 0%);


/* Radials */
@mixin radials($name, $inside, $outside, $softness){
    /* FF does not tween this, lets do it for them */
    @keyframes #{$name+"_out"} {
        @for $i from 0 through 99 {
            #{$i * 1%} {
                $start: #{max(0%, $i*1% + (($i - 100)/100)*$softness)};
                $end: #{min(100%,$i*1% + (($i - 100)/100)*$softness + $softness)};
                mask: radial-gradient(circle, $inside 0, $inside $start, $outside $end, $outside);
            }
        }
        100% {mask: none;}
    }
    @keyframes #{$name+"_in"} {
        @for $i from 1 through 100 {
            #{(100-$i) * 1%} {
                $start: #{max(0%, $i*1% + (($i - 100)/100)*$softness)};
                $end: #{min(100%,$i*1% + (($i - 100)/100)*$softness + $softness)};
                mask: radial-gradient(circle, $outside 0, $outside $start, $inside $end, $inside);
            }
        }
        100% {mask: none;}
    }
}
@include radials(compositor_transition_radial, white, transparent, 15%);
@include radials(compositor_transition_radial_hard, white, transparent, 0%);


/* conical, windshield-wiper */