Argthtjtr

I'm trying to make a complex animation, so I made the next simple example to ilustrate my problem.

The next code tries to make an object rotate, change its color at 50% of animation and keep it until 100%,
the problem I got is that when it changes from 50% to 100% it doesn't keep the previous keyframe (50%), it becomes transpatent again at 100%.

I've worked with some animation software like blender or animate cc and the default behavior is to keep values of the
properties set in the last keyframe unless you actively change it to something else.

I know that I can set the background property again to red at 100%. but for a real complex animation that would mean repeating A LOT of values,
I'm also aware of the "animation-fill-mode" property which keeps the final state of animation if it is set to "forward",
so I though that if I did that in each step it would behave as I wish but it didn't work :(

Is there a good workaround for this problem without having to repeat each property on every frame?
Can I change the default behaviour?

Note: I thought that if a property is not set on each frame it would default to the initial value (0% frame),
however I didn't set any "transform:rotate" property at 50% and it's not defaulted to 0%'s value, since it interpolates the value between 0% and 100%,
so I have no idea how this really works :/ , some clarification on why does this happen would be really appreceated

    .test{

        all: unset;

        animation-name: rotate_and_change_color;

        animation-duration: 3s;

        animation-fill-mode: forwards;

        animation-timing-function: linear;

        animation-direction: normal;

    }







    @keyframes rotate_and_change_color{

        0%{transform: rotate(0deg);

            animation-fill-mode: forwards;  

        }

        50%{

            background: red;

            animation-fill-mode: forwards;  

        }

        100%{transform: rotate(360deg);

            animation-fill-mode: forwards;  

        }

    }

One way is to consider multiple animations where you can easily control each property:

.test {

  animation-name: rotate, change_color;

  animation-duration: 3s;

  animation-fill-mode: forwards;

  animation-timing-function: linear;

  animation-direction: normal;

  

  width:200px;

  height:200px;

}



@keyframes rotate {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



@keyframes change_color {

  50%,

  100% {

    background: red;

  }

}

<div class="test">

</div>

Concerning your note this apply to only the last and first state where if you don't specify any value the computed value will be considered (the initial one or the one defined in the style of the element)

If a 0% or from keyframe is not specified, then the user agent constructs a 0% keyframe using the computed values of the properties being animated. If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.^ref

For the other states, you have in fact an interpolation considering the value you have defined and the one automatically done (in case you didn't define the 0% and 100%)