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

CSS CSS Selectors Advanced Selectors :root and :target

Posted by XIN FANG ZHONG
XIN FANG ZHONG
10,149 Points

About the example CSS animate

I have check the example png file, it has 10 key frames of the animation. You set the keyframe function to move -1900px, and hence the animation work. Here it's my question, why this animate function just display every key frame of the animation but not just move the png smoothly (move pixel by pixel, rather than jump every 190px in this example)?

2 Answers

alexandraz
alexandraz
9,587 Points
alexandraz
alexandraz
9,587 Points

Look at the background image: It has 10 monsters (190px wide) one after the other, so at every step the next monster frame (the next 190px of the image) will appear. If you would move it pixel by pixel it would look like a carousel of monsters.

matsum0t0
matsum0t0
12,520 Points
matsum0t0
matsum0t0
12,520 Points

Hello, I'm unsure really without seeing your work but have you tried just two keyframes. Starting at 0% and the second ending at 100%? Something like this...

@-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); 
                                                -webkit-transform: translate3d(0,0,0); 
                                                -o-transform: translate3d(0,0,0);
                                                -ms-transform: translate3d(0,0,0); 
                                                transform: translate3d(0,0,0); }
                                    100% { -moz-transform: translate3d(-1900px,0,0); 
                                                 -webkit-transform: translate3d(-1900px,0,0);
                                                 -o-transform: translate3d(-1900px,0,0);
                                                 -ms-transform: translate3d(-1900px,0,0);
                                                  transform: translate3d(-1900px,0,0); } 
                                      }

maybe?

XIN FANG ZHONG
XIN FANG ZHONG
10,149 Points

um...I mean the animate which provided by Guil, link is here: http://codepen.io/Guilh/pen/QwvxOp I don't understand why the png file, which have 10 key frames of the animation, just display each key frame directly but not move pixel by pixel.