-
Notifications
You must be signed in to change notification settings - Fork 305
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Multiple animations with the same property on the same element not supported #608
Comments
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. |
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... |
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. |
Yup, that's fine, thank you very much for the support! |
Hello!
First of all, thanks a lot for such a great library! It's very pleasant to integrate and use so far.
However, I've encountered a bug: if I define multiple animations for an element comma-separated, the first one does not play.
Example: I'm trying to do a simple fade in-out loop.
RML:
RCSS:
Expected result: blank screen, then the text fades in, then in a few seconds fades out. Works as intended in browsers: https://jsfiddle.net/29wab1s7/
Result with RmlUi: nothing happens within 5 seconds, then text fades out.
Used RmlUi commit:
43955b75557185728a44d35f535388fe851e9901
(the latest one inmaster
at the moment of writing).Thank you very much in advance!
The text was updated successfully, but these errors were encountered: