Animation css in wrong order
AverTry opened this issue · comments
Hi, both scoped and global, reorder css and prevents proper animation.
Working fine in normally imported CSS and Module imported CSS
Error only occurs with solid-styled v0.10.0
Correct Order:
.revealingImage {
view-timeline-name: --revealing-image;
view-timeline-axis: block;
animation: linear reveal both;
animation-timeline: --revealing-image;
animation-range: cover 10% contain 40%;
}
Error using <styles jsx>, css``
Error using <styles jsx global>
After manually changing in browser dev tools to get it working
Source Code and Polyfill js taken from https://developer.chrome.com/docs/css-ui/scroll-driven-animations
New CSS properties for 2024
This is an upstream issue so we'll see.
On the other hand, I would think the reason this is not yet supported is because animation-range
is yet to be a standard. It's currently in Editor's Draft status.
Yes I believe your right. Upon further testing, Firefox has revealed those unsupported parts, are most likely the missing parts when compiling, and is the reason the one part that is supported, to be orphaned, hence the reason it's at the end.
So it would seem once this has better browser coverage, lightning css will include it.
Thank you for the quick response.