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 Unused CSS Stages CSS Animations Full-Page Animation Project 2: WebKit Only

Posted by name564681351614
name564681351614
3,497 Points

Stage 12, Challenge Task 1

Stage 12 - CSS Animations - Challenge

I'm having a difficult time with the challenge for this stage. Below is the challenge and my answer. What am I doing wrong?

Challenge: Challenge Task 1 of 2

Using the prefix for WebKit-based browsers, bind the bg-move animation to the body selector. Give it an 8 second duration, then set it so that the final keyframe continues to apply after the animation sequence has completed.

Answer: body { -webkit-animation: bg-move 8s infinite; }

2 Answers

Max Goetz
Max Goetz
5,360 Points
Max Goetz
Max Goetz
5,360 Points

Hi Eric,

Instead of using 'infinite', you will want to use 'forwards' which is a value in the animation-fill-mode property. Remember from the lesson that the island at the top would snap back to it's original position once the animation was completed. By using 'forwards', the last keyframe (ie. the final resting place for the islands) is applied and now the islands stay put once the animation is finished.

For more information, visit the MDN

By using 'infinite' you will be causing the island to contine to play the animation over and over again, which wasn't the main goal in the lesson.

Hope this helps! :)

Max

eck
eck
43,038 Points
eck
eck
43,038 Points

So the problem is you are asked to have the animation stop on the last frame, but the animation property value that you declared tells the animation to loop. What you need is to replace "infinite", with "forwards"

The following css is what you need for the animation to play once and then remain on the final frame:

body {
  -webkit-animation: bg-move 8s forwards;
}