CSS variable scoping when using animation
Watching Kevin's video (https://www.youtube.com/watch?v=Qj0Qx8HpNUo) on parallax had me wondering at 8:22. He goes ahead and uses the --parallax-speed variable, which is declared privately/locally in each of the .parallax's children. Each .parallex child also has an animation declared, which makes use of the @keyframes parallax animation. How does the @keyframes parallax animation scope have access to the --parallax-speed variable of every child?
Kevin Powell
YouTube
True parallax with CSS-only is now possible
https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=cssparallax 👈 Interested in levelling up your CSS game? I’ve got courses!
Parallax effects can be cool, but I’m always told the CSS-only solutions aren’t “true” parallax. Well, thanks to scroll-timeline: scroll(), we can now create true parallax effects without on...
4 Replies
Because the animation is applied to each child, then each individual child gets the variable defined in it. Both are on the same element, just not in the same selector.
Besides, variables are also always available to the descendents of the element they're set on
so basically the @keyframes animation scope is "copied" into the element's scope and can look up the closest variable inside the parent scope, which is the child selector?
the animation is applied to .parallax> *, aka every child element
not sure about the first part, it's just that the animation runs on the child and has access to the child's scope
the animation doesn't really have its own scope I think?
ok