Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kenn Hyatt
9,683 PointsCSS Animations and binding to selectors
In the lesson "Full-Page Animation Project - Part 2 @ roughly 8:20", you will see that binding the animations to CSS selectors take place in the body tag. I know the first video touched on why; I am looking for someone to break it down for me.
+10 cool points for the first person who can talk about the hierarchy in depth and give suggested reading.
Kenn Hyatt
9,683 PointsSo the only reason the body selector was used is because the shoreline pic was the background image?
So in theory, had the frog been a "background image" I would have used the body selector as well?
(I'm trying to establish a rule of thumb that lets me know when to use the body selector or the images' selector)
Thanks
Guil Hernandez
Treehouse TeacherThat's correct, you'll just need to use the multiple background syntax in the keyframe rule to animate the frog image. Check out this demo made by David Walsh.
Kenn Hyatt
9,683 PointsThank you, that is very helpful
1 Answer
Nick Pettit
Treehouse TeacherGuil Hernandez might be able to offer more detail here, but it looks like he binds the animation to the body because it contains the background image. If the animation were placed on any child elements of the body, the background wouldn't move. Does that make sense? :)
Guil Hernandez
Treehouse TeacherGuil Hernandez
Treehouse TeacherHi @Kenn Hyatt,
As Nick mentioned, I used the
bodyselector because the body element is what displays the background image. I simply animated the body'sbackground-positionto create the appearance of movement.Let me know if you have any questions. :)