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

Trouble with task 1.

Trouble with task 1: "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."

My Answer: body { -webkit-animation-name: bg-move; -webkit-animation-duration: 8s; -webkit-animation-iteration-count: 9s; }

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Animations</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="boat">
        <img class="steam" src="http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png" alt="steam">
        <img src="http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/boat.png" alt="tugboat">
    </div>
    <img class="mike" src="http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/mike.png">
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */


body {
  -webkit-animation-name: bg-move;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: 9s;
}
.mike {

}
.boat {
    -webkit-animation: rock-boat 3s ease infinite;
}
.steam {
    -webkit-animation: steam 4s 2s infinite;
}

/*  Keyframes - WebKit only
------------------------------------------ */

@-webkit-keyframes rock-boat {
    50%  { -webkit-transform: rotate(-5deg) translateY(-10px); }
}
@-webkit-keyframes steam {
    40%,
    60%  { opacity: 1; }
    100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
@-webkit-keyframes bg-move {
    0%   { background-position:  100% -220px; }
    100% { background-position: -350% -220px; }
}
@-webkit-keyframes mike-float {
    50% { -webkit-transform: rotateZ(5deg) translateY(-5px); }
}

3 Answers

Sarah Hoopes
Sarah Hoopes
6,304 Points

Aha! I'm sorry - it's not "infinite"! It's "forwards"!

I went back to try the challenge and this worked:

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

The value "forwards" means the animation's final keyframe continues to apply after the final iteration of the animation completes. (See http://css-infos.net/property/-webkit-animation-fill-mode)

I apologize again - I thought it was asking for a loop. I'm still learning too!

Sarah Hoopes
Sarah Hoopes
6,304 Points
Sarah Hoopes
Sarah Hoopes
6,304 Points

Try changing your -webkit-animation-iteration-count to "infinite". "Infinite" means that the animation will keep going in a loop.

-webkit-animation-iteration-count: infinite;

You can also try using the -webkit-animation shorthand property. This way you don't need three separate lines of code. A space separates the values . It would look like this:

-webkit-animation: bg-move 8s infinite;

Hope this helps!

name564681351614
name564681351614
3,497 Points

Thank you Sarah. I tried using 'infinite' initially and still didn't pass the challenge. I thought I may have been sending it into some infinite loop or something so I changed it to one second longer than the duration thinking I was meeting all parameters. Anywho...I updated my answer to the below and it's still not working right. Thoughts?

I do have to admit. This CSS course is starting to kick my butt. I'm getting pretty discouraged. I figured that if I make it through maybe I can move along to a few other things and then go through the course again to grasp the concepts more thoroughly. It's tough with a full time job, etc. It would be nice to focus on learning this full time for a while. :(

body {
  -webkit-animation: bg-move 8s infinite;
}
Angel martinez
Angel martinez
4,329 Points
Angel martinez
Angel martinez
4,329 Points

22 the at-rule @-webkit-keyframes is not implemented.

25 the at-rule @-webkit-keyframes is not implemented.

30 the at-rule @-webkit-keyframes is not implemented.

34 the at-rule @-webkit-keyframes is not implemented.

You can go here to validate your css3: http://jigsaw.w3.org/css-validator/

name564681351614
name564681351614
3,497 Points

Hi Angel,

Thank you for your feedback. I have to say, I'm not following it. The lines indicated are what was preloaded for the test. When it says "Not implemented" I'm not sure what that means. What is the actual error?