Why is my keyframes animation only working one way?

Question

I have a CSS keyframes animation that I'm using like so:

.content[docked=true] {
    animation: dockContent ease var(--dock-animation-time);
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.content[docked=false] {
    animation: dockContent ease var(--dock-animation-time);
    animation-direction: reverse;
    animation-fill-mode: backwards;
}

When the docked attribute is set to true, it animates as expected. Afterwards, when the docked attribute is set to false, it doesn't animate and instead snaps to the initial values (0% -- it's running in backwards) as if there were no animation at all. The animation is still being run through though, because I am not setting the CSS rules back to their starting values anywhere except for the animation. After reverting the docked attribute to false, setting it to true again results in the same 'jump' with the expected end values but no transition or value interpolation. Why is this happening?

My animation is too elaborate to use transitions because it sets values in non-linear ways along its duration. That's exactly why I'd prefer not to have to make a second animation with all the values flipped.