background-attachment fixed with CSS keyframe animation not working in Firefox

Question

I am attempting to create a fairly simple animated carousel using CSS. Each image should appear with a wipe from left to right. It is working fine in Safari and Chrome, but Firefox seems to be ignoring background-attachment:fixed, causing the animation to not work as expected (see images below).

I've seen some other posts about background-attachment:fixed not working in Firefox when combined with transitions, but have not yet found a solution. My code is as follows:

.carousel {
    position:relative;
    height:100%;
    width:100%;
    overflow: hidden;
    margin-left: -10px;
    z-index: -1;

}

.image {
    
    background-size: 83%;
    background-attachment:fixed;
    background-repeat: no-repeat;
    position: absolute;
  
    top:0;
    bottom:0;
    right:0;
    left:0;

    transform-origin: center;
    background-position: right 0;
    
    z-index:0;
}

.image.selected {
    
    animation:swipe 2.5s ease-out;
    z-index:10;
   
}

.image.previous {
    z-index:5;
}

@keyframes swipe {
    
    0% { 
        transform: scale(1.4);
        filter: blur(2px);
        -webkit-filter: blur(2px);
        
        height:100%;
        width:0%;
        
    }

    60% {
        filter: blur(0px);
        -webkit-filter: blur(0px);
    }

    85% {
        height:100%;
        width:100%;
    }
    
    100% {  
        transform: scale(1);
    }
}

Any suggestions/solutions would be greatly appreciated!