Multiple animations with the same property on the same element not supported

[archydragon]

Multiple animations with the same property on the same element not supported

[mikke89]

Hey, and thanks for the kind words! And also for the detailed issue description.

Yeah, I see that we are not acting like web browsers here. In fact, we haven't really made any considerations for multiple animation values acting on the same properties. That's a use case I haven't come across yet, so we simply don't handle that in any particular way.

Just to be clear, we should support multiple animation values more generally, I added a test here just be sure that it works as expected in a more straightforward case: 559d84a

I might look to see if we can do something about this without too large changes. For now though, I'd suggest that you use a single set of keyframes if you can, e.g.:

@keyframes fadeinout {
    20%, 80% {
        opacity: 1;
        visibility: visible;
    }
}

.fadeinout {
    opacity: 0;
    visibility: hidden;
    animation: 5s fadeinout;
}

I would also say that in the example you posted, the element is visible with full opacity before and after the animation, so it has a sharp transition which could be problematic. The above example should be more stable in this regard.

[archydragon]

Single set of keyframes works very well for me! Sorry, I'm not really proficient with CSS animations so just copy-pasted fadein and fadeout from samples code originally :D

The documentation at https://mikke89.github.io/RmlUiDoc/pages/rcss/animations_transitions_transforms.html states that "Multiple animations can be specified on the same element by using a comma-separated list", so yep, it's just a question of feature parity with browser CSS behavior people like me might expect. Probably something for 7.0...

[mikke89]

Looked a bit more into this one again to see if there is a quick way to make it work with multiple animations with the same property on the same element. Unfortunately, it requires quite a bit more work due to some architectural assumptions, especially since different animations can have completely different animation styles (such as repetition count).

For now, I added a warning in this situation, so that users at least know something is going on.

I am closing this issue for now, and instead putting it on my long-term feature list. Certainly would be a nice-to-have feature for the future.

[archydragon]

Yup, that's fine, thank you very much for the support!